模态框问题 I 由于某种原因，我的模态框没有关闭

Question

我想为两个图像制作模态框。模态框正在打开，但无法关闭。

这是我的脚本

...
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
    if (event.target == modal) {
        lol.style.display = "none";
    }
}
...

Answer 1

这是

修复后的代码http://jsfiddle.net/dncgc42t/4/

问题是你有很多类close span，所以你应该循环它们，因为当你使用document.getElmentsByClassName('close')[0]时，这将始终只返回具有类close的第一个元素，所以其他元素不会受到影响。

另一方面

对模态使用class而不是id会更好。

Answer 2

您使用两个跨度，只有一个跨度被添加到 onclick 事件中，因为您使用 [0] 索引。添加第二个带有 [1] 索引将起作用，但使用 for 循环会更好。

另请注意，您可能可以创建单个模式窗口类。一次只能看到一个。

在带有 for 循环的工作版本下方

  var i;
  for( i=0; i<span.length; i++)
  {
     span[i].onclick = function() {
      box.style.display = "none";
      lol.style.display = "none";
     }
  }

新的JSFiddle，点击这里