Modal弹窗错误（js中display:none函数）

Question

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

.Modal Pop up onclick on image，模态弹出必须将属性从 display:none 更改为 display:flex。

但还是不行。

这是一个 link 到 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";
});

Answer 1

您没有 ID=Avatar15 的 link / 按钮有点击事件显示到弹出窗口

添加到 HTML :

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

Answer 2

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

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

}`

在参考中，youtube 视频 link 没有 HTML 页面的滚动条。当页面滚动时，应该使用 fixed 属性.

第二个选项： 当模态显示时在主体上添加一个 class 作为 'overflow: hidden' 并在模态为 hide/display none.

时删除 class

Mistakes with Modal Pop up (display:none function in js)