Javascript 单击'；不显示模态

我是编程新手，我尝试在点击时创建模态，但当我点击按钮时弹出消息不会显示。奇怪的是，只有覆盖层才有效！这并不是因为我使用了标签而不是按钮，因为我尝试过使用按钮而不是锚定标签，但仍然不起作用

下面是我的代码片段：

const openModalButtons=document.querySelectorAll（“[data model target]”）
const closeModalButtons=document.querySelectorAll（“[data close button]”）
const overlay=document.getElementById（'overlay'））
openModalButtons.forEach（按钮=>{
按钮。addEventListener（'单击'，（）=>{
const modal=document.querySelector（button.dataset.modalTarget）
openModal（模态）
console.log（“打开成功”）；
})
})
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'）
}

正文{
背景图像：线性渐变（rgba（255255255.2），rgba（255255255.2）），url（'images/blue_checkered_table.jpg'）；
}
.头衔{
显示：内联块；
文字装饰：无；
填充：15px；
-webkit文本笔划：1px黑色；
颜色：白色；
文本阴影：
2×2×0#000，
-1px-1px 0#000，
1px-1px 0#000，
-1px 1px 0#000，
1×1×0#000；
}
.标题：悬停{
文字装饰：无；
-webkit文本笔划：1px黑色；
颜色：#76B9F6；
文本阴影：
2px 2px 0黑色，
-1px-1px 0黑色，
1px-1px 0黑色，
-1px 1px 0黑色，
1px 1px 0黑色；
} 
#mySidenav a{
保证金：120px 0px 0px 0px；
位置：绝对位置；
左：-150px；
过渡：0.3s；
填充：20px；
宽度：200px；
文字装饰：无；
字体大小：20px；
颜色：白色；
边界半径：0 5px 5px 0；
}
#我的导航a：悬停{
左：0；
}
#关于{
显示：内联块；
文字装饰：无；
填充：15px；
颜色：白色；
文本阴影：
2×2×0#000，
-1px-1px 0#000，
1px-1px 0#000，
-1px 1px 0#000，
1×1×0#000；
顶部：5px；
背景色：#4CAF50；
}
#历法{
显示：内联块；
文字装饰：无；
填充：15px；
颜色：白色；
文本阴影：
2×2×0#000，
-1px-1px 0#000，
1px-1px 0#000，
-1px 1px 0#000，
1×1×0#000；
顶部：85px；
背景色：#2196F3；
}
#待办事项{
显示：内联块；
文字装饰：无；
填充：15px；
颜色：白色；
文本阴影：
2×2×0#000，
-1px-1px 0#000，
1px-1px 0#000，
-1px 1px 0#000，
1×1×0#000；
顶部：165px；
背景色：#f44336；
}
#回馈{
显示：内联块；
文字装饰：无；
填充：15px；
颜色：白色；
文本阴影：
2×2×0#000，
-1px-1px 0#000，
1px-1px 0#000，
-1px 1px 0#000，
1×1×0#000；
顶部：245px；
背景色：#555
}
*，*：：之后，*：：之前{
框大小：边框框；
}
.莫代尔{
位置：固定；
最高：50%；
左：50%；
转换：转换（-50%，-50%）比例（0）；
过渡：200ms缓进缓出；
边框：1px纯黑；
边界半径：10px；
z指数：10；
背景色：白色；
宽度：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,5）；
指针事件：无；
}
#覆盖{
不透明度：1；
指针事件：全部；
}

转动轮子
你是谁。
&时代；
我的同僚们都是精英。
她的别名是ut illo doloremque eum ipsum obcaecatis reiciensis debitis
我们需要一个解决方案，
你是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说？
所有的人都有一个共同的目标，这是一个共同的目标。
Amet assumenda eos建筑设计师，德朗沃卢帕提布斯酒店
这是我的工作！沃鲁帕塔特姆·马克西姆·埃乌斯·尤姆
多洛雷姆·多洛尔·奎斯·托塔姆！大虾
这是我的荣幸！Eligendi，自由女神。Ex，repellat sapiente！

您忘了添加正确的CSS来显示模式，只需将

显示：block

添加到

.active

类：

.modal.active {
  transform: translate(-50%, -50%) scale(1);
  display:block;
  top:50%;
  left:50%;
}

以下是一个工作片段：

const openModalButtons=document.querySelectorAll（“[data model target]”）
const closeModalButtons=document.querySele