我有3个div，每个div都有自己的主题，现在我希望每个div打开其模式

Question

到目前为止，我设法通过单击任意一个div来打开一个模式。 如何为一个div元素设置一个模态，也就是说，当我单击服务以打开服务模态时，以及当我单击即将打开的有关模态时，等等……我也必须关闭每个打开一个模态...我不知道如何将每个div与它自己的模态连接起来。 这是我的代码...

<div class="section">
      <div class="container">
        <div class="row">
          <div class="col-md-4 sector">
            <h3>Services</h3>
            <i class="fa fa-gear"></i>
            <div class="over">
              <span class="tooltiptext">Show more...</span>
            </div>
          </div>
          <div class="col-md-4 sector">
            <h3>About me</h3>
            <i class="fa fa-address-card-o"></i>
            <div class="over">
              <span class="tooltiptext">Show more...</span>
            </div>
          </div>

          <div class="col-md-4 sector">
            <h3>Contact</h3>
            <i class="fa fa-phone"></i>
            <div class="over">
              <span class="tooltiptext">Show more...</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal-container" id="myMod">
     <div class="modal-content">
          <span class="close">&times</span>
          <h1>Heading</h1>
          <p>Some text goes in here...</p>
     </div>
</div>
  <div class="showcase">
      <div class="container">
        <h1>Got Ideas?</h1>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed sem rhoncus urna iaculis faucibus. Pellentesque ultrices nibh ac imperdiet tincidunt. Donec hendrerit velit eros</p>
        <a href="about.html" class="btn btn-primary">Read More</a>
      </div>
    </div>

  <script type="text/javascript">
    // Get the button that opens the modal
     var myOver = document.getElementsByClassName('over');
     // Get modal to pass it to function
     var modal = document.getElementById('myMod');
     // get closing button
     var span = document.getElementsByClassName('close')[0];
     // Function to open the modal
     for(var i = 0; i<myOver.length; i++){
        myOver[i].addEventListener('click', function(){
         modal.style.display = 'block';
        });
     }


    // When the user clicks on <span> (x), close the modal
    span.onclick = function(){
    modal.style.display='none';
    }

  </script> 

Answer 1

您可以使用类似的命名方案，只需在被单击的id后面附加一个后缀即可找到​​正确的文本，例如，使每个span元素都有一个对应于它们所使用的模式的id。 例如contact然后将click事件监听器设为

function(e) { //e is the event object event
   document.getElementById(e.target.id + "-modal").style.display = 'block'
}

现在将联系方式标识为“ contact-modal”，它应该很容易找到它

至于关闭每个元素，只需使用modal-contain类遍历所有元素，然后在打开新元素之前将其display设置为none