代码之家 › 专栏 › 技术社区 › JDT

如果模态数未知,则多个模态不会关闭

css javascript

JDT · 技术社区 · 8 年前

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>

4 回复 | 直到 8 年前

Adam Chubbuck 8 年前

下面是你要找的。如前所述,您正在覆盖绑定到的事件 window 通过循环并重新创建它,但是事件只需要注册一次,如下所示。

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

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

Graham P Heath Bergi 8 年前

window.addEventListener('click', function....)

您可能希望存储对这些函数的引用,以便window.removeEventListener后来。

connexo 8 年前

这和你要找的很接近吗?

我主要是重用了你的代码,删除了阻碍你的东西。

关键的一点是,在用于关闭modals的click处理程序中,您需要检查click的目标是否是其中一个按钮。我还删除了按钮周围的跨度,这似乎没有任何意义的使用。

最后,我换了你的 onclick = 通过 addEventListener('click',

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

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

document.body.addEventListener('click', function(e) {
  if (e.target.matches('button.pop-up')) return;
  
  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>
<button type="button" class="pop-up">SEND</button>
<button type="button" class="pop-up">SEND</button>

JDT 8 年前

为了澄清,这是我正在使用的解决方案:

    // Get the modal
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].addEventListener('click', function() {
    modals[i].style.display = "block";
  })
}

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

for (let i = 0; i < btns.length; i++) {
  modals[i].addEventListener('click', function() {
        if (event.target == modals[i]) {
            modals[i].style.display = "none";
        }
  })
}

这似乎是预期的工作,就我所知,没有任何问题,创造一个听众的一切。