Javascript 按钮和/或窗口单击事件时模式不关闭

我有一个关闭按钮旁边的模式，不工作，我正在努力找出它（尽管所有的资源在其他票可用）。当我单击模态之外的任何位置时，模态也不会关闭

//获取模式
var modal=document.getElementById（“myModal”）；
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementById（“myImg”）；
var modalImg=document.getElementById（“img01”）；
var captionText=document.getElementById（“caption”）；
img.onclick=函数（）{
modal.style.display=“块”；
modalImg.src=this.src；
captionText.innerHTML=this.alt；
}
//获取关闭模态的元素
var span=document.getElementsByClassName（“closebtn”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

&时代；

要使发布的代码正常工作，需要进行两项更改：

在打开模式的单击处理程序中停止事件传播

• 如果没有停止，打开模态的单击将到达窗口单击处理程序，并在打开模态后立即关闭模态

解决以下问题：窗口单击处理程序中的键入错误正在检查

（event.target==modal）

而不是

（event.target！=modal）

，但如果用户单击modal元素本身中的元素，则简单测试

（event.target！=modal）

会返回假阳性

代码片段解决了使用来检测

事件的组合问题。目标

是否具有

模态

类或具有

模态

类的祖先元素

“严格使用”；
//获取模态
var modal=document.getElementById（“myModal”）；
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementById（“myImg”）；
var modalImg=document.getElementById（“img01”）；
var captionText=document.getElementById（“caption”）；
img.onclick=函数（事件）{
modal.style.display=“块”；
modalImg.src=this.src；
captionText.innerHTML=this.alt；
event.stopPropagation（）；//防止事件到达window.onclick
}
//获取关闭模态的元素
var span=document.getElementsByClassName（“closebtn”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
/***更新的window.onclick hander***/
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
让modalContainer=event.target.closest（“.modal”）；
if（modalContainer==null&&modal.style.display==block）{
modal.style.display=“无”；
}
}

img{
最小高度：4rem；
最小宽度：4rem；
边框：中蓝色；
}
.closebtn{
字体大小：200%；
颜色：白色；
背景色：红色；
}
.莫代尔{
背景颜色：黄色；
显示：无；
}

&时代；

您是否使用引导框架？似乎可以正常工作。请创建一个