数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery 阻止模态框打开时页面滚动？
模态框是一种特殊的用户界面，我们将其显示在网页所有内容的顶部。它用于在网页上显示一些特殊信息，或将用户从网页的常规流程中转移出去。
例如，您可能在许多网站上看到过，订阅弹出框出现在网页上，提示您输入您的电子邮件地址以订阅时事通讯。同样，警报框也是模态框，在您关闭模态框之前不允许您与网页内容交互。
因此，当我们使用模态框向用户显示重要信息时，始终建议阻止主体滚动，以防止用户与网页内容交互，并将注意力集中在模态框的重要信息上。
在本教程中，我们将学习使用 Jquery 阻止模态框打开时主体滚动的不同方法。
使用 CSS 的“overflow”属性禁用主体滚动
我们可以使用 overflow 属性来避免 HTML 元素上的滚动。每当我们将 overflow 属性的值设置为“hidden”时，它就会停止滚动。
在这种方法中，每当用户打开模态框时，我们将 overflow 设置为 hidden；每当用户关闭模态框时，我们将 overflow 设置为 auto 以允许用户滚动。
语法
用户可以按照以下语法来阻止模态框打开时主体滚动，使用 overflow 属性。
// add overflow-hidden when users open the modal
$('body').css("overflow", "hidden");
// add overflow-auto when users close the modal
$('body').css("overflow", "auto");
在上面的语法中，我们使用 Jquery 的 CSS() 方法在用户打开和关闭模态框时设置网页主体上“overflow”属性的特定值。
示例 1
在下面的示例中，我们创建了包含“modal”类名的 div 元素。此外，我们添加了内容以在 div 元素内显示模态框。接下来，我们在模态框内添加了“关闭模态框”按钮以关闭模态框，并在网页上添加了“打开模态框”按钮以打开模态框。
在 CSS 中，我们以这样的方式设置模态框及其内容的样式，使其显示在网页其他内容的顶部。此外，我们还设置了按钮的样式。“modal-open”类在 CSS 中包含“overflow: hidden”CSS 属性。
我们在打开按钮中添加了“modal-open”类，在关闭按钮中添加了“modal-close”类。在 JavaScript 中，每当用户单击“打开模态框”按钮时，我们在主体中添加“modal-open”类并打开模态框。每当用户单击“关闭模态框”按钮时，我们使用 removeClass() 方法从主体中删除“modal-open”类并关闭模态框。
在输出中，用户可以观察到，当模态框打开时，他们无法滚动主体。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<style>
.modal {
position: fixed;
display: none;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 15px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.modal-open { overflow: hidden; }
.btn {
display: inline-block;
padding: 10px 20px;
background-color: green;
color: white;
text-decoration: none;
border-radius: 10px;
}
.scroll { height: 1000px; background-color: red;}
</style>
</head>
<body>
<h3> Using the <i> overflow CSS property </i> to disable the body from scrolling when a modal is opened </h3>
<p> Click the button below to open the modal. </p>
<a href = "#" class = "btn modal-open"> Open Modal </a> <br><br>
<div class = "scroll"> </div>
<div class = "modal">
<h2> Modal Content </h2>
<p> This is the content of the modal window. </p>
<a href = "#" class = "btn modal-close"> Close </a>
</div>
<script>
$(document).ready(function () {
$('.modal-open').on('click', function () {
$('body').addClass('modal-open');
$('.modal').fadeIn();
});
$('.modal-close').on('click', function () {
$('body').removeClass('modal-open');
$('.modal').fadeOut();
});
});
</script>
</html>
示例 2（使用 css() 方法设置 overflow 属性）
在此示例中，我们使用 Jquery 的 CSS() 方法设置网页主体的“overflow”属性。我们在此示例中创建了模态框，与第一个示例相同。
在 Jquery 中，当用户单击打开模态框按钮时，我们使用 CSS() 方法设置“overflow: hidden”，当用户单击关闭模态框按钮时，我们设置“overflow: auto”。
我们需要将 CSS 属性作为第一个参数传递，并将它的值作为 CSS() 方法的第二个参数传递。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<style>
.modal {
position: fixed;
display: none;
top: 20%;
left: 50%;
padding: 15px;
border-radius: 12px;
transform: translate(-50%, -50%);
background-color: white;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: green;
color: white;
text-decoration: none;
border-radius: 10px;
}
.scroll {height: 130%; background-color: green; }
</style>
</head>
<body>
<h3> Using the <i> JQuery's scroll-lock plugin </i> to disable the body from scrolling when a modal is opened </h3>
<p> Click the button below to open the modal. </p>
<a href = "#" class = "btn modal-open"> Open Modal </a> <br> <br>
<div class = "scroll"> </div>
<div class = "modal">
<h2> Modal Content</h2>
<p> This is the content of the modal window. </p>
<a href = "#" class = "btn modal-close"> Close </a>
</div>
<script>
$(document).ready(function() {
$('.modal-open').on('click', function() {
$('body').css("overflow", "hidden");
$('.modal').fadeIn();
});
$('.modal-close').on('click', function() {
$('body').css("overflow", "auto");
$('.modal').fadeOut();
});
});
</script>
</html>
结论
我们学习了如何在用户在网页上打开模态框时阻止主体滚动。在这里，我们以不同的方式使用了“overflow”属性来实现我们的目标。在第一个示例中，我们通过向主体添加包含 overflow 属性的特定类来设置“overflow”属性。在第二个示例中，我们使用 css() 方法设置了 overflow 属性。
但是，用户也可以使用 Jquery 的 scroll-lock 插件来锁定屏幕，但这可能不允许用户与模态框交互。
24K+ 浏览量
