如何将模态窗口jQuery重写为本机Javascript？

如何将模态窗口的jQuery代码重写为本机Javascript？ 保存和使用数据属性非常重要

我不能同时使用forEach和getAttribute编写代码。我总是使用jQuery编写代码，现在我必须使用本机JavaScript编写代码

$（“[数据模式]”）。单击（函数（）{
var target=$（this.attr（'data-modal'）；
if（target=='close'）$（'.modal container'）.removeClass（'active'）；
else$（'.modal container'+target）.addClass（'active'）；
});
正文{
填充：50px；
}
.btn组.btn{
显示：内联块；
填充：10px 20px；
背景色：#2980b9；
颜色：#fff；
光标：指针；
用户选择：无；
-webkit用户选择：无；
-moz用户选择：无；
}
.集装箱{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
不透明度：0；
可见性：隐藏；
过渡：所有0.3秒缓解；
}
.modal-container.active{
不透明度：1；
能见度：可见；
}
.模态容器.叠加{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
背景色：rgba（0,0,0,0.7）；
z指数：1；
}
.模态容器{
位置：相对位置；
z指数：2；
背景色：#fff；
填充：30px；
边界半径：3px；
最大宽度：600px；
保证金：50px自动；
}

模态示例
开放式模式1
开放式模式2
开放式模式3
模态窗口标题
1洛雷姆，伊普苏姆·多洛尔坐在阿梅特·康塞特图尔（amet Concertetur Adipising Elite）的位子上。时间上的铜酸盐阻碍了类似的行为，它能使人的心灵得到充分的保护，也能使人的思想得到充分的发挥。埃尤斯，特尼乌尔

关窗
模态窗口标题
2洛雷姆，伊普苏姆·多尔坐在阿梅特·康塞特图尔的公寓里。时间上的铜酸盐阻碍了类似的行为，它能使人的心灵得到充分的保护，也能使人的思想得到充分的发挥。埃尤斯，特尼乌尔

关窗
模态窗口标题
3.Lorem，ipsum dolor坐在amet Concertetur Adipising Elite的位子上。时间上的铜酸盐阻碍了类似的行为，它能使人的心灵得到充分的保护，也能使人的思想得到充分的发挥。埃尤斯，特尼乌尔

关窗
试试这个

document.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("btn")) {
    document.querySelector(tgt.dataset.modal).classList.add('active')
  } else if (tgt.classList.contains("overlay") || tgt.classList.contains("close")) {
    tgt.closest('.modal-container').classList.remove('active')
  }
});


document.addEventListener（“单击”），函数（e）{
常数tgt=e.target；
if（tgt.classList.contains（“btn”））{
document.querySelector（tgt.dataset.modal）.classList.add（'active'））
}else if（tgt.classList.contains（“覆盖”）| | tgt.classList.contains（“关闭”））{
tgt.closest（'.modal container'）.classList.remove（'active'））
}
});
正文{
填充：50px；
}
.btn组.btn{
显示：内联块；
填充：10px 20px；
背景色：#2980b9；
颜色：#fff；
光标：指针；
用户选择：无；
-webkit用户选择：无；
-moz用户选择：无；
}
.集装箱{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
不透明度：0；
可见性：隐藏；
过渡：所有0.3秒缓解；
}
.modal-container.active{
不透明度：1；
能见度：可见；
}
.模态容器.叠加{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
背景色：rgba（0,0,0,0.7）；
z指数：1；
}
.模态容器{
位置：相对位置；
z指数：2；
背景色：#fff；
填充：30px；
边界半径：3px；
最大宽度：600px；
保证金：50px自动；
}

开放式模式1
开放式模式2
开放式模式3
1洛雷姆，伊普苏姆·多洛尔坐在阿梅特·康塞特图尔（amet Concertetur Adipising Elite）的位子上。时间上的铜酸盐阻碍了类似的行为，它能使人的心灵得到充分的保护，也能使人的思想得到充分的发挥。埃尤斯，特尼乌尔
 关窗
2洛雷姆，伊普苏姆·多尔坐在阿梅特·康塞特图尔的公寓里。时间上的铜酸盐阻碍了类似的行为，它能使人的心灵得到充分的保护，也能使人的思想得到充分的发挥。埃尤斯，特尼乌尔
 关窗
3.Lorem，ipsum dolor坐在amet Concertetur Adipising Elite的位子上。时间上的铜酸盐阻碍了类似的行为，它能使人的心灵得到充分的保护，也能使人的思想得到充分的发挥。埃尤斯，特尼乌尔
 关窗
为什么要从代码段中删除jQuery？非常感谢。我还有一个问题。如果在模式窗口内有一个“关闭”按钮，例如一个“关闭”图标，我希望在单击这些元素时，我的模式窗口也应该关闭。如何最好地实现这一点？我在代码中编辑了html并添加了一个按钮，您可以在我的postSee更新中看到。。。。。。。。。。。