时间戳

首页 > 解决方案 > 如果模态数未知，多个模态将不会关闭

javascript - 如果模态数未知，多个模态将不会关闭

问题描述

我试图让下面的代码工作，但它似乎只适用于列表中的最后一个模式。

var modals = document.getElementsByClassName('modal');
var btns = document.getElementsByClassName("pop-up");
var spans=document.getElementsByClassName("close-modal");

for(let i=0;i<btns.length;i++){
   btns[i].onclick = function() {
      modals[i].style.display = "block";
   }

}
for(let i=0;i<spans.length;i++){
    spans[i].onclick = function() {
       modals[i].style.display = "none";
    }
 }
}
// When the user clicks anywhere outside of the modal, close it

for(let i=0;i<modals.length;i++){
        window.onclick = function(event) {
            if (event.target == modals[i]) {
                modals[i].style.display = "none";
            }
        }
    }
}

有人可以帮助清理我哪里出错了吗？

编辑：下面是使用下面答案中描述的事件侦听的片段-此片段显示实现此事件侦听器会阻止按钮在单击时工作-我是否错误地实现了它？如果我删除 JS 中的代码以单击任何地方，那么其余的工作。

function submitBtn(){
  // Get the modal
  var modals = document.getElementsByClassName('modal');
  // Get the button that opens the modal
  var btns = document.getElementsByClassName("pop-up");
  var spans=document.getElementsByClassName("close-modal");

  for(let i=0;i<btns.length;i++){
    btns[i].onclick = function(){
      modals[i].style.display = "block";
    }
  }

  for(let i=0;i<spans.length;i++){
    spans[i].onclick = function(){
      modals[i].style.display = "none";
    }
  }

  // When the user clicks anywhere outside of the modal, close it
  window.addEventListener('click', function(){
    var modals = document.getElementsByClassName('modal');

  for(let i = 0; i < modals.length; i++){
    modals[i].style.display = "none";
  }
  });
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  display: table;
}

/* Modal Content */
.modal-content div {
  padding: 5px;
  margin: 5px;
}

/* The Close Button */
.close-modal {
  color: #aaaaaa;
  text-align: right;
  font-size: 28px;
  font-weight: bold;
}

.close-modal:hover,
.close-modal:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<div class="modal">
  <div class="modal-content">
    stuff1<p class="close-modal">&times;</p>
  </div>
</div>
<div class="modal">
  <div class="modal-content">stuff2<p class="close-modal">&times;</p></div>
</div>
<span>
  <button type="button" class="pop-up" onclick="submitBtn()">SEND</button></span>
<span>
  <button type="button" class="pop-up" onclick="submitBtn()">SEND</button></span>

标签： javascriptcss

解决方案

以下是您正在寻找的内容。如前所述，您正在window通过循环并重新创建它来覆盖您绑定的事件，但该事件只需要注册一次，如下所示。

window.addEventListener('click', function() {
  var modals = document.getElementsByClassName('modal');

  for (let i = 0; i < modals.length; i++) {
    modals[i].style.display = "none";
  }
});

推荐阅读