如何实现弹框出现时背后的页面不能滑动

fish_whale 2017-05-18 01:31:14

写了一个微信活动页面，希望能在弹框出现时页面不会滑动，到手机上却发现没有实现，想请教下该怎么解决，代码如下：
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
.tankuangback {
position: fixed;
z-index: 30;
background: #000;
width: 100%;
height: 100%;
opacity: 0.2;
top: 0;
bottom: 0;
filter: alpha(opacity=30);
display: none;
}

.tankuang {
position: absolute;
z-index: 30;
width: 75%;
height: 2.8rem;
margin: auto;
top: 50%;
left: 12.5%;
text-align: center;
border-radius: 4px;
background: #fff;
display: none;
}

.quren {
font-size: 0.34rem;
color: #0A92DF;
position: absolute;
right: 5%;
bottom: 0.2rem;
}
</style>
</head>

<body>
<form action="">
<input type="text" class="phone" name="phone" placeholder="请输入手机号码" />
<input type="button" class="mybutton" value="submit" />
</form>
<div class="tankuangback"></div>
<div class="tankuang">
<p class="addp">请输入正确的手机号</p>
<div class="quren">确认</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(".mybutton").click(function() {
$("body").css("overflow-y", "hidden");
$(".tankuangback").show();
$(".tankuang").show();
$(".quren").click(function() {
$(".tankuangback").hide();
$(".tankuang").hide();
$("body").css("overflow-y", "scroll");
});
})
</script>
</body>

</html>

...全文