- 蒙层
- 效果:
- 关键字: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,要保证居中,需要设置宽度+left*2==屏幕宽度,top*2+高度==屏幕高度。
- 在移动端,要想页面底部不能滑动,必须将html和body的overflow都设置为overflow:hidden才行。
- 关键代码: