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

发布：2020/11/11 11:26:41作者：管理员来源：本站浏览次数：1300

蒙层效果

具体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
- 实现：
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;
} 
```

蒙层居中，且底部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;");
}

　图文解决calc()函数 css中用100%的宽度/高度，减去50px

c# – 使用Web API作为SignalR服务器并从Windows服务中使用它　

css 语法-uni-app 教程 css 引用-uni-app 教程 css中伪元素及伪类::after和::before清除浮动或float html css position绝对定位与相对定位 css3绘制向右箭头 html5和css3制作switch开关控件 css相关教程和技巧以及注意地方总结 div或元素垂直居中对齐，Css3在html5中实现，流式display:flex布局 css border三角箭头和三角形通过CSS伪元素制作三角箭头教程

柏港建站平台

柏港 CSS

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

蒙层效果

关键代码讲解

柏港为您推荐了一些相关资讯