多模态框：没有关于javascript的线索

所以我知道Stackflow上有关于如何做到这一点的答案，比如下面两篇帖子：

但我找不到一个使用类似代码的答案

所以我需要有四个模态框，按钮是一个图像。因此，四分之一中的第一个有效，但其他三个无效。我有一种感觉，我需要修改javascript，但我只是一个网页设计师，我自己学习编码。。。所以我不是很在行，我需要帮助

谢谢

这是密码

/*部门员工弹出窗口*/
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色：#1A1A；
保证金：自动；
填充：20px；
边界：0；
宽度：80%；
颜色：#ffffff；
}
/*关闭按钮*/
.结束{
颜色：#FFFFFF；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#f1f3f2；
文字装饰：无；
光标：指针；
}

&时代；
安德烈·莱霍克斯

安德烈自2000年以来一直在赫斯特练习。他最初来自赫斯特，但他在蒙特利尔生活了一小部分，在渥太华大学完成了大学学业。
安德烈在法律方面有着广泛的实践。他在安大略省北部，包括詹姆斯湾海岸的土著社区，有超过20年的执业经验。他处理刑事和家庭法、房地产法、遗嘱和不动产、民事诉讼以及商业和公司法方面的案件。安德烈协助犯罪受害者从CICB获得赔偿，并帮助土著社区成员在寄宿学校获得身心虐待赔偿。最后，15年多来，安德烈一直是自然资源和林业部的检察官，负责与该部门有关的省级犯罪
安德烈一直参与他的社区，以改善不幸和贫困人口的命运。他担任La Maison Arc en ciel董事会（CA）主席超过10年。随后，他从2007岁到2017岁，是圣母院医院基金会的一员。他目前是格兰德诺德法律诊所董事会成员
安德烈于1991获得渥太华大学工商管理学士学位，随后于1994获得法学学位。1995年，他在大卫·兰希尔（David Lanthier）位于科克伦（Cochrane）的律师事务所从事写作实践，1996年，他被授予律师资格。在科克伦工作了几年后，他回到了家乡
安德烈是AJEFO和科克伦法律协会的成员
最后，当安德烈不工作时，他喜欢户外活动，与妻子米其林和他的小弟弟朱丽叶在一起

安德烈·莱霍克斯
律师
&时代；
卡琳·布罗库

卡琳在赫斯特出生和长大。自2013年以来，她一直在该公司担任法律助理
Karine与Lehoux先生一起工作，协助他处理刑事事宜和遗嘱。卡琳是接待员和房地产法律办事员。她可以用两种官方语言帮助你

卡琳·布罗库
法律/行政助理
//获取模态
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=“无”；
}
}

您仍然需要修复HTML以删除重复ID（或完全删除它们），但您可以迭代每个

员工

，并适当添加链接到周围元素的事件侦听器：

document.querySelectorAll（'.employee'）.forEach（（employee）=>{
const span=employee.querySelector（'.close'）；
const btn=employee.querySelector（'button'）；
const modal=employee.querySelector（'.modal'）；
btn.onclick=（）=>modal.style.display=“block”；
span.onclick=（）=>modal.style.display=“无”；
});
window.onclick=函数（事件）{
if（event.target.classList.contains（'modal'））
event.target.style.display=“无”；
}

/*部门员工弹出窗口*/
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色：#1A1A；
保证金：自动；
填充：20px；
边界：0；
宽度：80%；
颜色：#ffffff；
}
/*关闭按钮*/
.结束{
颜色：#FFFFFF；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#f1f3f2；
文字装饰：无；
光标：poi