【CSS-04】移动端蒙层底部页面禁止滑动

蒙层效果

---

具体demo地址如下，欢迎讨论指导。

See the Pen pop_window_center by Fiona ( @fiona2016) on CodePen.

See the Pen pop_window_center by Fiona (@fiona2016) on CodePen.

关键代码讲解

---

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，要保证居中，需要设置宽度+left2==屏幕宽度，top2+高度==屏幕高度。
   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;");
   }	
   

```