发布：2020/11/11 11:26:41作者：管理员 来源：本站 浏览次数：3826
蒙层效果
具体demo地址如下，欢迎讨论指导。
See the Pen pop_window_center by Fiona ( @fiona2016) on CodePen.See the Pen pop_window_center by Fiona (@fiona2016) on CodePen.
关键代码讲解
-
蒙层
-
效果：
- 关键字：z-index, rgba
- 实现：
- body分为两个大的div区域，一个是底部展示的div(div-back),一个是弹出的蒙层div(div-pop)。在弹出的蒙层区域，中间部分是container区域，里面有头部的背景图片和content内容，其中包括[知道了]尾部按钮。
- 对于div-pop，背景色设置为50%透明度的黑色，z-index要大于0，这样就有了蒙层效果。关键代码：
.div-pop{ background-color:rgba(0,0,0,0.5); z-index:1; } -
效果：
-
蒙层居中，且底部div禁止滑动。
- 关键字：fixed，js计算高度
- 实现：
- 蒙层的div是fixed，要保证居中，需要设置宽度+left2==屏幕宽度，top2+高度==屏幕高度。
- 在移动端，要想页面底部不能滑动，必须将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;"); }
