Javascript 开闭模式

我已经创建了一个模式，我想在点击按钮时打开/关闭，但是，似乎有一个问题，它有时起作用，但大多数时候不起作用

根据我在下面添加的代码，它在这里运行良好。然而，当我把它添加到我的网站上时，它似乎对我不起作用

document.getElementById（'button'）。addEventListener（“单击”，函数（）{
document.querySelector（'.bg modal'）.style.display=“flex”；
});
document.querySelector（'.close'）.addEventListener（“单击”，函数（））{
document.querySelector（'.bg modal'）.style.display=“无”；
});
.bg模式{
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.93）；
位置：绝对位置；
排名：0；
左：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
显示：无；
}
.模态内容{
宽度：400px；
高度：400px；
}
.模态内容输入，
文本区，
.模态内容a{
显示：块；
宽度：100%；
利润率：15px自动；
}
.结束{
字体大小：40px；
颜色：#fff；
变换：旋转（45度）；
位置：绝对位置；
右：20px；
顶部：0px；
光标：指针；
}

+
你想和我聊些什么？
发送消息
在加载页面之前执行脚本，因此
document.getElementById（'button'）
为空。尝试移动
元素末尾的
标记。
这三段代码都在一个HTML文件中还是在三个单独的文件中

如果答案是（a）它们都在同一个HTML文件中，那么请参见Iso的答案-JavaScript必须在浏览器解析HTML后运行

然而，这种方法有时有效（特别是在本地计算机上），这表明您实际上有3个独立的文件：一个脚本文件、一个HTML文件和一个CSS文件。在localhost上，浏览器发送每个文件的请求和它们到达之间几乎没有延迟。这意味着在JavaScript运行时，浏览器已经解析了DOM（由HTML指定的文档对象模型），因此所有的工作都如您所期望的那样

但是，当您通过网络（将其放到您的网站上）加载此文件时，每个文件到达浏览器所需的时间较长，并且可能在JavaScript运行时文档对象模型尚未完成加载-这将导致
Document.getElementById（'button'）
如Iso所述为空

如果您使用的是jQuery，请将代码放入其中，这将在运行DOM之前等待DOM就绪。像这样：

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

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

如果您没有使用jQuery，请将代码放入
$（窗口）中。在（'load'）
上，如下所示：

$(window).on('load', function() {
    document.getElementById('button').addEventListener("click", function() {
        document.querySelector('.bg-modal').style.display = "flex";
    });

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

但是，请记住，如果jQuery可用，那么第二种方法是次优的，因为它将在运行代码之前等待所有内容（包括所有图像等）加载完毕，因此，如果您的用户处于慢速internet连接上，则单击处理程序可能需要几秒钟才能注册。jQuery方法将在DOM就绪后运行代码，但不会等待所有图像等加载，因此单击处理程序的注册速度要快得多。
太棒了！这似乎成功了，谢谢你的帮助。我还有一个简短的问题。你知道如何在模式打开时使页面不可滚动吗？