Javascript 使用CSS网格并使用每个div作为弹出模式的按钮，但它不起作用？

我们设置了一个css网格，使每个div成为每个收件人的弹出菜单按钮。Iv'e插入了多个代码，由于某种原因，当我点击live时，它不允许我打开模式。当我在按钮上放置active时，它会显示出来，所以我知道它在那里，只是单击时它不会出现

此外，在此之后，我可能需要弄清楚如何使每个人的每个模态保持独立。如果有人想知道我该怎么做。非常感谢

我对javascript的了解大概只有20%或更少。谢谢你

/*eslint环境es6*/
/*eslint禁用*/
const openModalButtons=document.querySelectorAll（“[data modal target]”）
const closeModalButtons=document.querySelectorAll（“[data close button]”）
const overlay=document.getElementById（'overlay'））
openModalButtons.forEach（按钮=>{
按钮。addEventListener（'单击'，（）=>{
const modal=document.querySelector（button.dataset.modalTarget）
openModal（模态）
})
})
overlay.addEventListener（'click'，（）=>{
const modals=document.queryselectoral（'.modal.active'）
modals.forEach（modal=>{
关闭模式（模式）
})
})
closeModalButtons.forEach（按钮=>{
按钮。addEventListener（'单击'，（）=>{
const modal=按钮。最近（“.modal”）
关闭模式（模式）
})
})
函数openModal（模态）{
if（modal==null）返回
modal.classList.add（'active'）
overlay.classList.add（'active'）
}
功能关闭模式（模式）{
if（modal==null）返回
modal.classList.remove（'active'）
overlay.classList.remove（'active'）
}

正文{
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：100vh；
}
.BK节{
背景色：#d7d2cb；
身高：100%；
最大宽度：100%；
}
.中段{
左边距：100px；
右边距：100px；
}
h3{
颜色：#ff7477；
字体大小：15px；
文本对齐：居中；
字体系列：局格罗特，无衬线；
字体大小：300；
字体风格：普通；
}
.parent{
显示：网格；
网格模板列：重复（5，1fr）；
网格模板行：重复（10，1fr）；
栅柱间隙：50px；
网格行间距：35px；
}
.div1{网格区域：1/2/2/3；}
.div2{网格区域：2/2/3/3；}
.div3{网格区域：3/2/4/3；}
.div4{网格区域：3/3/4/4；}
.div5{网格区域：4/1/5/2；}
.div6{网格区域：4/2/5/3；}
.div7{网格区域：4/3/5/4；}
.div8{网格区域：4/4/5/5；}
.div9{网格区域：4/5/5/6；}
.div10{网格区域：5/1/6/2；}
.div11{网格区域：5/3/6/4；}
.div12{网格区域：5/4/6/5；}
.div13{网格区域：6/2/7/3；}
.div14{网格区域：6/3/7/4；}
.div15{网格区域：7/3/8/4；}
.div16{网格区域：8/2/9/3；}
.div17{网格区域：8/3/9/4；}
.div18{网格区域：8/4/9/5；}
.div19{网格区域：9/3/10/4；}
.div20{网格区域：9/4/10/5；}
.div21{网格区域：10/3/11/4；}
.静态img{
宽度：100%；
对齐内容：居中对齐；
}
.btn{
宽度：100%；
边界：无；
背景色：透明；
颜色：#fff；
光标：指针；
}
*，*：：之后，*：：之前{
框大小：边框框；
}
.莫代尔{
位置：固定；
最高：50%；
左：50%；
转换：转换（-50%，-50%）比例（0）；
过渡：200ms缓进缓出；
边框：1px纯黑；
z指数：100；
背景色：白色；
宽度：500px；
最大宽度：80%；
}
.modal.active{
转换：转换（-50%，-50%）比例（1）；
}
.模态标题{
填充：10px 15px；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
边框底部：1px纯黑；
}
.模态标题.标题{
字体大小：1.25rem；
字体大小：粗体；
}
.模式标题.关闭按钮{
光标：指针；
边界：无；
大纲：无；
背景：无；
字体大小：1.25rem；
字体大小：粗体；
}
.模态体{
填充：10px 15px；
}
#覆盖层{
位置：固定；
不透明度：0；
过渡：200ms缓进缓出；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.8）；
指针事件：无；
}
#覆盖{
不透明度：1；
指针事件：全部；
}
.方框标题{
利润上限：-20px；
左边距：100px；
宽度：60%；
}
美国设计师协会{
位置：相对位置；
保证金：0；
文本对齐：居中；
}
学生单身{
保证金：0自动；
填充：0；
宽度：100%！重要；
z指数：1；
不透明度：100；
}
img.fun{
位置：相对位置；
保证金：0自动；
填充：0；
最大宽度：100%！重要；
z指数：1；
不透明度：1；
显示：无；
}
.个人{
位置：相对位置；
}
按钮：悬停img.fun{
显示：块；
}
按钮：悬停img.student-single{
显示：无；
}

梅丽莎·奥本
东西
&时代；
需要什么，需要什么，需要什么，需要什么？所有的人都有一个共同的目标，这是一个共同的目标。Amet assumenda eos建筑设计师

我们可以举一个它不起作用的例子吗？我用youtube链接更新了这个问题，这样你就可以看到它没有任何作用。不幸的是，这没有多大帮助。这里的代码和下面的代码显然有些不同