Javascript 两个css模式框，用于加载两个不同的

我已经在我的网站上设置了一个模式框，通过一个链接触发，该链接正常工作

我想添加第二个模式框来加载另一个内容，但两个按钮都打开了同一个框，我似乎无法找到它的底部

正文{字体系列：Arial，Helvetica，无衬线；}
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：80%；
}
/*关闭按钮*/
.结束{
颜色：#AAAAA；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
模态示例
收音机
&时代；
无线电传真机

事件
&时代；
事件

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

您正在使用这两个按钮打开同一个模式，同时覆盖脚本中的变量

只需将单击每个按钮的次数设置为执行以下操作更简单、代码更少：

document.getElementById（'myModal'）.style.display='block'

和

document.getElementById（'myModal1'）。style.display='block'

用于第二个按钮，因为您已经在每个模式上设置了ID

---

这消除了硬编码到页面中的过多javascript代码。

您使用这两个按钮打开同一个模式，也覆盖了脚本中的变量

只需将单击每个按钮的次数设置为执行以下操作更简单、代码更少：

document.getElementById（'myModal'）.style.display='block'

和

document.getElementById（'myModal1'）。style.display='block'

用于第二个按钮，因为您已经在每个模式上设置了ID

---

这消除了硬编码到页面中的过多javascript代码。

您不必放置2个脚本标记>代码不起作用的原因是按钮、跨距、div具有相同的id和相同的类。 这应该是你想要的

正文{字体系列：Arial，Helvetica，无衬线；}
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：80%；
}
/*关闭按钮*/
#关闭1，#关闭2{
颜色：#AAAAA；
浮动：对；
字号：28px；
字体大小：粗体；
}
#关闭1：悬停，#关闭2：悬停{
颜色：#000；
文字装饰：无；
光标：指针；
}
模态示例
收音机
&时代；
无线电传真机

事件
&时代；
事件

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

您不必放置2个脚本标记>代码不起作用的原因是按钮、跨距、div具有相同的id和类。 这应该是你想要的

正文{字体系列：Arial，Helvetica，无衬线；}
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*S