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

Question

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

Here is my script

...
// 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/

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

另一方面

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

Answer 2

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

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

带有for循环的工作版本

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

New JSFiddle, click here