jquery遮罩层不滚动
上代码：
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="UTF-8" />
<title>jquery遮罩层不滚动</title>
<style>
#mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background: #00000088;
opacity: 0.5;
display: none;
}
.popup {
position: absolute;
width: 96%;
height: 200px;
background: #fff;
z-index: 1000;
display: none;
bottom: 0px;
}
.btn_close {
position: absolute;
top: 5px;
right: 5px;
}
.ovfHiden {
overflow: hidden;
height: 100%;
}
</style>
</head>
<body>
<button class="btn_show">遮罩层</button>
<div class="popup">
<button class="btn_close">x</button>
</div>
<div>
<h1>遮罩出现，页面禁止滚动</h1>
<h1>遮罩出现，页面禁止滚动</h1>
<h1>遮罩出现，页面禁止滚动</h1>
<h1>遮罩出现，页面禁止滚动</h1>
<h1>遮罩出现，页面禁止滚动</h1>
<h1>遮罩出现，页面禁止滚动</h1>
<h1>遮罩出现，页面禁止滚动</h1>
<h1>遮罩出现，页面禁止滚动</h1>
<h1>遮罩出现，页面禁止滚动</h1>
<h1>遮罩出现，页面禁止滚动</h1>
<h1>遮罩出现，页面禁止滚动</h1>
<h1>遮罩出现，页面禁止滚动</h1>
<h1>遮罩出现，页面禁止滚动</h1>
<h1>遮罩出现，页面禁止滚动</h1>
</div>
<div id="mask" class="btn_close"></div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script>
$(function () {
$('.btn_show').click(function () {
$('html,body').addClass('ovfHiden');
$('#mask').css({
display: 'block',
})
var $Popup = $('.popup');
$Popup.css({
display: 'block',
})
})
$('.btn_close').click(function () {
$('#mask,.popup').css('display', 'none');
$('html,body').removeClass('ovfHiden');
})
})
</script>
</body>
</html>
