非一屏页面,出现遮罩层页面位置不动,并且遮罩层一屏显示。(pc,移动端都适用的方法)
首先展示页面效果:
遮罩没出现的页面张酱紫:页面在楼层二这个位置。
遮罩显示:后面页面页面任停留在当前浏览位置,滚动条并未回顶部
下面来说说写法:
css:
页面具体布局样式。。。。。。(此处省略无数个字)
遮罩层央视:遮罩层的样式就自己项目来写。这里只是举个例子。。。。。
.zhe_wrap{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.zhe_con_wrap{
position: absolute;
width: 40%;
height: 80%;
top: 10%;
bottom: 10%;
left: 30%;
background: rgba(255,255,255,1);
}
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="dom_wrap">
<!--页面内容部分-->
</div>
<!--遮罩层-->
<div class="zhe_wrap" style="display: none;">
<div class="zhe_con_wrap">
<!--遮罩层内容-->
</div>
</div>
</body>
</html>
那么重点来了。。。。。js:
当遮罩层(弹层)出现的时候给body设置style:overflow:hidden;属性就可以,哈哈哈哈哈,就这么简单。。。。
当遮罩层(弹层)消失的时候把body属性设置成overflow:auto,页面就可以继续在刚浏览的位置浏览了。。。。