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

Question

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

.Modal弹出onclick on image，模式弹出窗口必须更改显示的属性：none to 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

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

`.bg-modal {width：100％;身高：100％; background-color：rgba（63,191,63,0.64）;位置：固定;顶部：0;辩解内容：中心; align-items：center; display：none;

}`

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

第二个选项：当模态显示时，在主体上添加一个类为“overflow：hidden”，当模态为hide / display none时，删除该类。

Answer 2

您没有ID = Avatar15的链接/按钮，其中包含要显示弹出窗口的click事件

添加到HTML：

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