当我们打开一个模态框时,我们通常不希望页面的背景滚动,而只能让模态框内的内容滚动。这可以通过jQuery来实现,以下是具体步骤:
- 首先,需要给模态框添加一个唯一的ID,比如这里我们设置ID为“myModal”。同时,在页面的CSS样式中设置模态框的position为fixed,让其脱离了文档流并位于页面的最上层:
#myModal{
position: fixed;
z-index: 1050;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
- 接着,使用jQuery选择这个模态框,通过设置它的scrollTop属性来防止body滚动。当模态框打开时,scrollTop属性被设置为0,让模态框内的内容能够滚动,在模态框关闭时,scrollTop属性被设置为原来的值,让页面可以重新滚动。
// 打开模态框
$('#myModal').on('shown.bs.modal', function () {
$('body').addClass('modal-open');
$('body').css('top', -$(document).scrollTop());
$('#myModal').css('scrollTop', 0);
});
// 关闭模态框
$('#myModal').on('hidden.bs.modal', function () {
$('body').removeClass('modal-open');
$('body').css('top', '');
$(document).scrollTop(-parseInt($('body').css('margin-top')));
});
这里需要注意的是,在打开模态框时,我们添加了一个‘modal-open’类给body,这是Bootstrap所使用的类名,用来增加一个padding-right,来避免页面抖动。
- 当模态框关闭时,我们需要将scrollTop恢复原来的位置。这时我们可以使用jQuery选择文档对象,然后将其scrollTop设置回原来的值。
$(document).scrollTop(-parseInt($('body').css('margin-top')));
这样,就可以通过jQuery来阻止模态框外部的body滚动了,以下是一个完整的示例:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>如何用jQuery防止Body在打开模态时滚动</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
#myModal {
position: fixed;
z-index: 1050;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
</style>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
打开模态框
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">模态框标题</h4>
</div>
<div class="modal-body">
<p>模态框内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
// 打开模态框
$('#myModal').on('shown.bs.modal', function () {
$('body').addClass('modal-open');
$('body').css('top', -$(document).scrollTop());
$('#myModal').css('scrollTop', 0);
});
// 关闭模态框
$('#myModal').on('hidden.bs.modal', function () {
$('body').removeClass('modal-open');
$('body').css('top', '');
$(document).scrollTop(-parseInt($('body').css('margin-top')));
});
</script>
</body>
</html>
以上就是使用jQuery防止body在打开模态时滚动的完整攻略,无论是什么情况下,都有一个固定的方案。