要禁止下层的内容滚动，我们可以通过以下步骤实现：
1. 给body元素添加样式
我们可以给 <body> 元素添加样式来实现下层内容的禁止滚动。将下面的样式代码添加到你页面的CSS文件或页面内嵌的style标签中。
body.modal-open {
overflow: hidden;
}
这将将窗口的滚动条隐藏，并禁止滚动。
2. JS代码
为了在弹窗打开时添加样式，我们需要一些 JavaScript 代码。这里以jQuery为例：
$(document).ready(function(){
$('.modal').on('show.bs.modal', function (event) {
$('body').addClass('modal-open');
});
$('.modal').on('hide.bs.modal', function (event) {
$('body').removeClass('modal-open');
});
});
如上代码所示，当弹窗显示时（即 'show.bs.modal' 事件被触发），将 modal-open 类添加到 <body> 元素。隐藏弹窗时（即 'hide.bs.modal' 事件被触发），将 modal-open 类从 <body> 元素移除。这将启用和禁用我们在第1步中添加的样式。
示例一
以下是一个使用Bootstrap框架的实例。假设我们有一个按钮，点击后弹出窗口。我们使用Bootstrap的模态框（Modal）组件实现窗口弹出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Modal Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
body.modal-open {
overflow: hidden;
}
</style>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.modal').on('show.bs.modal', function (event) {
$('body').addClass('modal-open');
});
$('.modal').on('hide.bs.modal', function (event) {
$('body').removeClass('modal-open');
});
});
</script>
</body>
</html>
当我们点击按钮时，模态框将弹出。此时窗口下面的滚动将被禁止，并隐藏滚动条。
示例二
以下示例展示了一个自定义的弹窗。我们通过手写HTML和CSS创建了样式，通过JavaScript代码将其绑定到触发器上。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Disable Background Scroll when opening a modal</title>
<style>
body.modal-open {
overflow: hidden;
}
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.modal-wrapper {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
width: 50%;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
z-index: 9999;
}
</style>
</head>
<body>
<button id="open-modal">Open Modal</button>
<div class="modal-overlay"></div>
<div class="modal-wrapper">
<h2>Modal Title</h2>
<p>Modal Content goes here...</p>
<button id="close-modal">Close Modal</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script>
$(document).ready(function(){
$('#open-modal').on('click', function() {
$('.modal-overlay, .modal-wrapper').fadeIn();
$('body').addClass('modal-open');
});
$('#close-modal, .modal-overlay').on('click', function() {
$('.modal-overlay, .modal-wrapper').fadeOut();
$('body').removeClass('modal-open');
});
});
</script>
</body>
</html>
我们的自定义弹窗将于页面加载时隐藏。当我们点击 "Open Modal" 按钮时，弹窗将显示。此时窗口下面的滚动将被禁止，并隐藏滚动条。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：小程序显示弹窗时禁止下层的内容滚动实现方法 - Python技术站
微信扫一扫 
支付宝扫一扫 