Javascript 停止模式窗口滚动后的内容

我有以下代码：。单击“更多信息”链接时，模式窗口将打开。问题是，当您在模式窗口内滚动并到达模型窗口的末尾并继续滚动时，模式窗口后面的内容也会滚动。我需要的是防止这种情况，只允许模式窗口内容可以滚动

这方面最好的解决方案是什么

---

谢谢

这是您修改过的示例：

正如评论所提到的，您可以通过更改body的overflow属性来禁用body的滚动

这些是上述样本的变化（与您的相比）

---

当用户打开模式时，我会在主体中添加一个类，该类在后台停止滚动。你可以用js/css来实现这一点。对如何用js构建这段代码有什么建议吗？使用模式链接上的

单击
事件，然后单击，使用
元素.classList.add（'className'）
你能在我的W3Schools示例中应用这段代码吗？谢谢效果很好。还有一个小问题是，当我在手机上测试这个模式窗口时，当它出现时，当我向下滚动模式窗口时，不知何故，它会再次将内容弄乱并移动。手机和平板电脑是否也有修复方案？谢谢我在我的iphone上进行了测试，它似乎有以下问题：1。卷轴不平滑（尽管可以用css修复）2。正如您所描述的，当到达终点时，身体仍然会移动3。（仅在Safari中），当您滚动模态时，您可以在很短的时间内看到模态后面的主体。这是非常明显的，用户肯定会注意到这一点。当我在手机上显示全屏模式时，我通常会将主要内容放在一个div（main div）和另一个div（modal div）中，并将它们直接放在body下方。。。。。。。。当页面加载时，模态div被隐藏。当需要显示模态时，我会隐藏主div并显示模态div，而不是使用绝对位置（如您的情况）将其显示在主div的顶部。区别在于，现在您只需滚动主体，而不是滚动绝对位置的模态div。这将立即解决上述三个问题。如果在PC和移动设备中都显示全屏模式，这可能是最简单的解决方案。如果在PC上显示小模式（不覆盖整个屏幕），在手机上显示全屏模式。我建议一些JS来检查屏幕大小。如果它的大屏幕在屏幕中央显示一个绝对定位的模式，如果它的小屏幕像一个移动屏幕，则交换如上所述的主体内容：）
function openNav() {
    document.getElementById("myNav").style.height = "100%";
    document.body.style.overflow = "hidden";
}

function closeNav() {
    document.getElementById("myNav").style.height = "0%";
    document.body.style.overflow = "auto";
}