Javascript 赢得多个情态动词'；在其外部单击时无法关闭

我跟着这个图坦卡蒙来到这里： 问题是当我创建两个这样的模态时，第一个模态在我单击它的外部时不会关闭。以下是JSFIDLE：

//获取模式
var modal1=document.getElementById（'myModal1'）；
//获取打开模式对话框的按钮
var btn1=document.getElementById（“myBtn1”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn1.onclick=函数（）{
modal1.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal1.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==modal1）{
modal1.style.display=“无”；
}
}
//////////////////////////
//获取模态
var modal2=document.getElementById（'myModal2'）；
//获取打开模式对话框的按钮
var btn2=document.getElementById（“myBtn2”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[1]；
//当用户单击该按钮时，打开模式对话框
btn2.onclick=函数（）{
modal2.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal2.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==modal2）{
modal2.style.display=“无”；
}
}

您的

窗口的第二个声明。onclick

将覆盖第一个声明。您应该在一个函数中设置两个检查

window.onclick = function(event) {
    if (event.target == modal2) {
        modal2.style.display = "none";
    }
    if (event.target == modal1) {
        modal1.style.display = "none";
    }

}

---

您有两个window.onclick函数。删除其中一个并使其如下所示：

window.onclick = function(event) {
    if (event.target == modal1) {
        modal1.style.display = "none";
    }
    if (event.target == modal2) {
        modal2.style.display = "none";
    }
}

---

在关闭函数中，是否应该是if（event.target！=modal2）或者这只是一个输入错误？目前，只有当您单击模式时，它才会关闭，而当您单击外部时，它不会关闭。当然，有一种方法可以使用循环和类而不是ID来实现这一点？@NoahOlsen，但如果这是您所期望的，它会隐藏每个模式。var modals=document.getElementsByClassName（“model”）for（var i=0；iwindow.onclick = function(event) { if (event.target == modal1) { modal1.style.display = "none"; } if (event.target == modal2) { modal2.style.display = "none"; } }