移动端弹出阴影遮罩的几点问题和解决方法

在做移动端的立即购买页面时，点击底部固定栏立即购买按钮需要弹出一个阴影遮罩，在遮罩顶部有一个固定在底部的页面，所以总共是3层页面：最底层浏览页->阴影遮罩页->最上层的立即购买选择规格数量页；效果如下图：

在次过程中遇到的一些问题以及解决方案总结如下：

问题1：阴影遮罩出现后底部的页面还可以滑动；

解决：在弹出遮罩的js里click事件中，给body加overflow:hidden的css属性；$("body").css("overflow","hidden");

问题2：页面向上滑动，阴影遮罩和阴影遮罩上的立即购买页面会随着往上移动；

解决：编写了如下函数计算页面移动的距离，让遮罩和立即购买页面也移动相应的距离，代码如下：

[html] view plain copy

function getScrollTop(){
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
}else if(document.body){
scrollTop=document.body.scrollTop;
}
return scrollTop;
}

写了一个简单的demo，代码如下：

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" name="viewport">
<title>阴影遮罩</title>
<script src="js/jquery-1.11.1.min.js"></script>
<style>
body{
padding:0px;
margin:0px;
}
#back1{
z-index: 99999;
display: block;
background: rgba(0, 0, 0, 0.498039);
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
.one{
height:100px;
width:100%;
text-align: center;
background-color:#fff;
position:absolute;
bottom:0px;
display:none;
position: absolute;
bottom: 0;
z-index: 9999999;
}
.one span{
font-size:24px;
display: inline-block;
height:30px;
width:30px;
position: absolute;
right: 18px;
top: 0px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="back1" style="display: none; top: 0px;"></div>
<div class="one"><p>这是遮罩上面的一层</p> <span class="xx">x</span></div>
<div>阴影遮罩下面的页面</div>
<br /><br /><br /><br /><br /><br />
<div style="height:500px;width:200px;border:1px solid red;"></div>
<div>阴影遮罩下面的页面</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="bottom" style="position:fixed;bottom:0px;height:50px;width:100%;background-color:#ccc;line-height: 50px; text-align: center;">点我出现遮罩</div>
<script type="text/javascript">
//获取页面上移的距离
function getScrollTop(){
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
}else if(document.body){
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
$(".bottom").on("click",function(){
$("#back1").css("top",getScrollTop()+'px');
$("#back1").show();
$(".one").css("bottom",-getScrollTop()+'px');
$(".one").show();
$("body").css("overflow","hidden");
});
$(".xx").on("click",function(){
$("#back1").hide();
$(".one").hide();
$("body").css("overflow","auto");
});
</script>
</body>
</html>

至此，一个好用的弹出demo就完美收官啦！！

来源：https://www.cnblogs.com/lsongyang/p/9139831.html

标签

scrolltop