模式弹出错误（在js中显示为none功能）

Question

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

.Modal弹出窗口在图像上单击，该模式弹出窗口必须将属性从display：none更改为display：flex。

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

但仍然无法正常工作。

以下是指向CodePen CODEPEN的链接：

https://codepen.io/tta1eu/pen/gyGwOm

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";
});

Answer 1

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

添加到HTML中：

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

Answer 2

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

`.bg-modal {     宽度：100％;高度：100％;背景颜色：rgba（63,191,63,0.64）;位置：固定；     顶：0;证明内容：中心； align-items：居中;显示：无；

}`

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

第二个选项： 在显示模态时在主体上添加一个类为“溢出：隐藏”，而在模态不显示/不显示时将其删除。