【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. 蒙层

    • 效果:
      【CSS-04】移动端蒙层底部页面禁止滑动_第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才行。
    • 关键代码:
    
    // 因为不同屏幕高度不同,且字体大小不同content高度也不同,所以高度在js中控制。
    
                        
                        

你可能感兴趣的:(前端-CSS)