Question

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

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;
}

Answer 1

我怀疑它会是类，我会更多地考虑ID，因为它们需要是唯一的，你是否也更改了按钮ID？如果点击和关闭功能没有采用任何参数，你可以使用内联onclick html，然后你会更确定它不是ID搞砸了。在代码中，您还引用了一个类“closeSel”，我在HTML中没有看到

Answer 2

你很接近，但你需要遍历每个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>

多个模态，无法关闭？

2 个答案: