移动端弹出阴影遮罩的几点问题和解决方法
在做移动端的立即购买页面时，点击底部固定栏立即购买按钮需要弹出一个阴影遮罩，在遮罩顶部有一个固定在底部的页面，所以总共是3层页面：最底层浏览页->阴影遮罩页->最上层的立即购买选择规格数量页；效果如下图：
在次过程中遇到的一些问题以及解决方案总结如下：
问题1：阴影遮罩出现后底部的页面还可以滑动；
解决：在弹出遮罩的js里click事件中，给body加overflow:hidden的css属性；$("body").css("overflow","hidden");
问题2：页面向上滑动，阴影遮罩和阴影遮罩上的立即购买页面会随着往上移动；
解决：编写了如下函数计算页面移动的距离，让遮罩和立即购买页面也移动相应的距离，代码如下：
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，代码如下：
<!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就完美收官啦！！
