移动端蒙层底部页面禁止滑动

1. 蒙层 
   
   • 效果： 
     
   • 关键字：z-index, rgba
   • 实现： 
     
     1. body分为两个大的div区域，一个是底部展示的div(div-back),一个是弹出的蒙层div(div-pop)。在弹出的蒙层区域，中间部分是container区域，里面有头部的背景图片和content内容，其中包括[知道了]尾部按钮。
     2. 对于div-pop，背景色设置为50%透明度的黑色，z-index要大于0，这样就有了蒙层效果。关键代码： 
        
.div-pop{ 
background-color:rgba(0,0,0,0.5); 
z-index:1; 
} 


2. 蒙层居中，且底部div禁止滑动。

   • 关键字：fixed，js计算高度
   • 实现： 
     
     1. 蒙层的div是fixed，要保证居中，需要设置宽度+left*2==屏幕宽度，top*2+高度==屏幕高度。
     2. 在移动端，要想页面底部不能滑动，必须将html和body的overflow都设置为overflow:hidden才行。
   • 关键代码：

   <style>.container{position:relative;width:80%;left:10%;}</style>//因为不同屏幕高度不同，且字体大小不同content高度也不同，所以高度在js中控制。<script>//用$代替document.querySelector,节省重复代码； var $=function(selector){    return document.querySelector(selector);};//弹出框代码 function show_popwindow(){ //页面加载时，弹出框是隐藏的，当点击弹出按钮时，弹出框弹出    document.getElementById("live-detail-popwindow").style.display = "block";    //下面的两句是为了防止底部页面滑动。注：必须对html和body都设置overflow:hidden，移动端才能禁止滑动    $('html').setAttribute("style","overflow:hidden;height:100%;");    $('body').setAttribute("style","overflow:hidden;height:100%;");//        pop window 的margin top//设备的总高度    var height_total= document.documentElement.clientHeight;    //container的高度    var popheight=$('#pop_container').offsetHeight;    //top的值=（总高度-container高度）/2    var margin_top = (height_total-popheight) / 2;    $('#pop_container').style.top=margin_top+"px";}//窗口关闭时，pop-window需要隐藏，且body和html的overflow还原；function window_close(){    document.getElementById("live-detail-popwindow").style.display = "none";    $('html').setAttribute("style","overflow:auto;");    $('body').setAttribute("style","overflow:auto;");}   </sctipt>