如何在移动设备中查看模式框时停止背景滚动，只需使用CSS或Javascript

How to stop Background scrolling when modal box is in view in the mobile , just using CSS or Javascript?

本文关键字：滚动 背景 Javascript CSS 移动 模式      更新时间：2023-09-26

我正在开发一个响应式网站，当用户在移动设备中时，他/她可以查看模式框。为了实现这一点，我没有使用Bootstrap，只是使用简单的CSS和一点Javascript。现在，问题是我不知道如何在模态框处于视图中时停止背景，或者更确切地说，停止主体滚动。我试图使用JS将overflow-y从scroll操作到hidden，但它不起作用，或者可能不是正确的方法，我只是尝试了一下。无论如何，我在Stackoverflow中检查了一些答案，它们使用的是bootstrap 3。我想在不使用bootstrap 3的情况下解决这个问题，只使用纯CSS或Javascript，如果可能的话，我会非常感激。感谢您的回复。

附言：我并没有回避引导程序，我只是想知道是否有一个使用简单CSS和JS的可能解决方案。

  • 为此，您必须在body标记上应用cssDYNAMICALLY

JSFIDDLE此处

打开对话框时添加以下代码以停止在后台上滚动

$("body").css("overflow", "hidden");

当你关闭弹出窗口时添加这个-以启用再次滚动

$("body").css("overflow", "auto");
  • 尝试在您的html <head>标签中添加以下引用

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

工作演示-单击此处

相关文章：