模态弹出错误（显示：js中的无功能）答案

【问题标题】：Mistakes with Modal Pop up (display:none function in js)模态弹出错误（显示：js中的无功能）
【发布时间】：2019-04-14 17:43:59
【问题描述】：

我正在建立一个新的个人网站。

.Modal Pop up onclick on image, modal popup 必须将属性从 display:none 改为 display:flex。

我已经修改了我的代码结构，如下所示： https://www.youtube.com/watch?v=gLWIYk0Sd38

但还是不行。

这是 CodePen CODEPEN 的链接：

document.getElementById('Avatar15').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "flex";

});

document.querySelector('.close').addEventListener("click", function() {
    document.querySelector('.bg-modal').style.display = "none";
});

【问题讨论】：

【解决方案1】：

据我了解，您需要在滚动页面时在中心显示弹出窗口。然后，您必须更改以下 CSS 属性。

`.bg-模态{ 宽度：100%；高度：100%；背景色：rgba(63,191,63,0.64);位置：固定；顶部：0；证明内容：中心；对齐项目：居中；显示：无；

在参考中，youtube 视频链接没有 HTML 页面的滚动。当页面滚动时，应该使用固定属性。

第二个选项： 在显示模式时在正文上添加一个类作为“溢出：隐藏”，当模式为隐藏/不显示时删除该类。

【讨论】：

是的！喜欢的解决方案，主要问题仍然存在，我应该如何设置 js 代码以使我单击的每张照片在弹出窗口中打开？我要复制每张照片的功能还是有一个聪明的解决方案？
是的，您可以对所有图像使用一种功能。检查下面的 URL codepen.io/nsuyog-the-decoder/pen/mgBOGv 你可以从类名而不是 elementById 处理点击事件

【解决方案2】：

您没有 ID=Avatar15 的链接/按钮，该链接/按钮具有要显示到弹出窗口的点击事件

添加到 HTML 中：

<a id="Avatar15">Click</a>

【讨论】：

我刚刚更新了 CodePen，第一张照片上的 ID=Avatar15
如果我单击 ID=Avatar15 的 div，看起来没问题，它正在工作。什么excatly问题？你为什么要在每个 ID 上设置 ecent 监听器……你可以按类来做，并让图像 src 显示在模态中。
like：将 ID=Avatar15 放在 div class:child 中，而不是放在 div class:overlays 中，然后在弹出窗口中我可以打开每张照片吗？对于每张单张照片以及有关照片的更多信息，我都会像“缩放”一样使用弹出窗口。我还看到了一个插件，例如：FANCYBOX / 但现在太复杂了，但我还在学习，也许有一个简单的方法或一些我看不到的错误。
还有一点其他的事情是：为什么 th bg-modal（rgba green bg）设置为宽度：100%；高度：100%；但这不是覆盖他整页，但这不是一个大问题，我不想保留那个bg颜色
1) 是的，类似于，您将事件侦听器放置在哪个元素上并不重要...重要的是如何将相关图像 src 设置在模态弹出窗口内的 img 中并显示它。 2) 对于 bg，将模态 css 从绝对位置更改为固定位置。