多重情态，不能关闭

Multiple Modals, Can't Close?

本文关键字：不能      更新时间：2023-09-26

所以在我的网页上实现了一些不同的模态。我的代码如下:

HTML 

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times</span>
    <h3>Title</h3>
  </div>
</div>
JavaScript 

  <script>
  var modal = document.getElementById('modal');
  var btn = document.getElementById("mybtn");
  var span = document.getElementsByClassName("closeSel")[0];
  btn.onclick = function() {
      modal.style.display = "block";
  }
  span.onclick = function() {
      modal.style.display = "none";
  }
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }
  </script>

都很简单，我的问题发生时，我试图添加另一个模态，我改变id值，并添加另一个脚本不同的模态，这工作得很好，但当涉及到实际关闭模态它不会工作…对于关闭按钮CSS我使用相同的类，这是什么导致的问题?

/* The close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-style: arial;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

我怀疑这将是类，我会考虑更多的ID，因为它们需要是唯一的，你也改变按钮ID吗?如果单击和关闭功能不接受任何参数，您可以只使用内联onclick html，然后您将更确定它不是id弄乱。在代码中，您还引用了一个类"closeSel"，我没有在HTML

中看到。

差不多了，但是您需要遍历每个span元素。我附了一个工作的例子。

<!-- Test Modal -->
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>First Test text in modal..</p>
      </div>
    </div>
    <!-- Test Modal 2 -->
    <div id="myModal2" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>Second test text in modal..</p>
      </div>
    </div>
<script>
      var span = document.getElementsByClassName("close");
      var modal;
      var btn = document.getElementsByClassName("button is-primary is-small modal-button");
      for (var i = 0; i < btn.length; i++) {
        var thisBtn = btn[i];
        thisBtn.addEventListener("click", function(){
          modal = document.getElementById(this.dataset.modal);
          modal.style.display = "block";
        }, false);
      }
      // iterate through each span element for each modal
      for (var i = 0; i < span.length; i++){
        span[i].onclick = function(){
          modal.style.display = "none";
        }
      }
      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function(event) {
          if (event.target == modal) {
              modal.style.display = "none";
          }
      }
    </script>
相关文章：