Javascript 同一页上的多模式框不起作用

我想知道我应该添加或更改什么，以便w3schools教程适用于多个“模式框”

链接：

我的想法是对代码进行修改，我可以根据需要创建任意多的“项”或“模式框”，我尽量不使用jquery-only-javasript

注意：第一个“项目”工作正常，而第二个“项目”不工作

编辑：我知道在html中不能重复相同的id，但在javascript中，当我通过document.getElementsById（）更改document.getElementsByClassName（）时，模式框不起作用

代码：

//获取模式
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=“无”；
}
}

.item{
显示：块；
溢出：隐藏；
背景色：青色；
利润率：10px0；
}
.形象{
宽度：160px；
浮动：左；
}
.莫代尔{
显示：无；
位置：固定；
z指数1；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.418）；
}
.模态内容{
背景色：白色；
利润率：15%；
填充：20px；
宽度80%；
}
.结束{
浮动：对；
字体大小：20px；
字号：700；
}
.关闭：悬停，关闭：聚焦{
颜色：金色；
文字装饰：无；
光标：指针；
}

Lorem，ipsum dolor。
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。即使是这样，也要有类似的先见之明，因为这是一个正式的决定。劳丹蒂姆·福吉特·奈斯库特·沃卢蒂茨·马格尼·康塞特图

更多信息
X
Lorem，ipsum dolor。
Lorem ipsum dolor坐在amet Concertetur，告别精英。最小值是多少？地点：尼莫自然博物馆

按钮
按钮
Lorem，ipsum dolor。
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。即使是这样，也要有类似的先见之明，因为这是一个正式的决定。劳丹蒂姆·福吉特·奈斯库特·沃卢蒂茨·马格尼·康塞特图

更多信息
X
Lorem，ipsum dolor。
Lorem ipsum dolor坐在amet Concertetur，告别精英。最小值是多少？地点：尼莫自然博物馆

按钮
按钮

更改模态的id。Id不能重复。

Id应该是唯一的，您可以在按钮上添加onclick事件/span

<button class="open-modal" id="myBtn" onclick="openModal('myModal');">More Info</button>

<span class="close" onclick="closeModal('myModal')">X</span>

.item{
显示：块；
溢出：隐藏；
背景色：青色；
利润率：10px0；
}
.形象{
宽度：160px；
浮动：左；
}
.莫代尔{
显示：无；
位置：固定；
z指数1；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.418）；
}
.模态内容{
背景色：白色；
利润率：15%；
填充：20px；
宽度80%；
}
.结束{
浮动：对；
字体大小：20px；
字号：700；
}
.关闭：悬停，
结束：焦点{
颜色：金色；
文字装饰：无；
光标：指针；
}

Lorem，ipsum dolor。
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。即使是这样，也要有类似的先见之明，因为这是一个正式的决定。劳丹蒂姆·福吉特·奈斯库特·沃卢蒂茨·马格尼·康塞特图

更多信息
X
Lorem，ipsum dolor。
Lorem ipsum dolor坐在amet Concertetur，告别精英。最小值是多少？地点：尼莫自然博物馆

按钮
按钮
Lorem，ipsum dolor。
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。即使是这样，也要有类似的先见之明，因为这是一个正式的决定。劳丹蒂姆·福吉特·奈斯库特·沃卢蒂茨·马格尼·康塞特图

更多信息
X
Lorem，ipsum dolor。
Lorem ipsum dolor坐在amet Concertetur，告别精英。最小值是多少？地点：尼莫自然博物馆

按钮
按钮

简单的答案是不能在页面中重复元素ID。它们在定义上是唯一的好吧，但是在javascript中，当我通过GetElementsByClassName（）更改GetElementById（）时，var modal=document.getElementByClassName（'modal'）不起作用；var btn=document.getElementByClassName（“btn”）；var span=document.getElementsByClassName（“关闭”）[0]；