Javascript Span类在模式窗口中不关闭

我有两个模式窗口，一个用于添加数据，另一个用于编辑。以下“模式”不起作用，当按下span（x）或单击任何其他位置时，它将关闭

×；

试试这个：

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

&时代；
第一加
信息


添加
&时代；
第二加
信息




添加

希望下面的解决方案适合您。基本上，我在按钮中传递模态ID作为

数据

属性

注意：我假设模式标记结构保持不变，否则代码

元素.parentNode.parentNode…

将无法工作

单击按钮，将显示模式对话框（使用数据属性），单击模式中的

span

元素，我获得父

div

（具有模式ID）的句柄并关闭它

//显示模式
功能显示模式（元素）
{
var modal=document.getElementById（element.dataset.modal）；
modal.style.display=“块”；
}
//闭合模态
函数关闭对话框（元素）
{
var modalID=element.parentNode.parentNode.getAttribute（“id”）；
var modal=document.getElementById（modalID）；
modal.style.display=“无”；
}

&时代；
添加
信息


添加
&时代；
编辑
信息




编辑
开放式模式1
打开模式2

span=document.GetElementsByCassName（“关闭”）[0]

仅选择找到的第一个元素。哇哦。我是否应该复制这个元素并写入（“close”）[1]？也许将事件委托给最近的公共祖先元素更容易。类似于您在

窗口中所做的操作。单击
，只需检查单击的范围，然后关闭相应的模式。将
data dismission=“modal”
属性添加到范围中。它还将有助于减少您的代码。。。没有帮助，即使它应该……为每个模式制作两个不同的js怎么样？@shadowfeind我做了；另一个文件：//获取模态变量modal=document.getElementById（'Modal2'）；>不working@ShadowFiend不，第二个还没关。我更新了js和html页面。。。第一部作品fine@upicik尝试在第一个模态中查看渐变边界类。。当我更新你的html时，它没有结束标记。