针对遮罩层遮挡不完全的解决方法

2019-05-27  本文已影响0人  装在壳子里的刺猬

           我们自己写弹框时,他会有一个遮罩层,页面的内容超过了电脑物理高度,设置height:100%,这个遮罩层就只能挡住物理高度,剩下的那一部分就直接裸漏在外面了。

  那么针对这个问题,我找到了一个方法,

  在html文件中

<div id="model>    

    <div class="mask"></div>    

    <!-- 这里开始才是真正的内容 -->   

     <div class="dialog"></div>

</div>

在css文件中

#model {   

     position: fixed;    

      left: 0; right: 0;  top: 0;  bottom: 0;   

      z-index: 99999;

}

#model .mask{    

    position: absolute;   

    left: 0;    right: 0;    top: 0;    bottom: 0;   

    background-color: #000;    

    opacity: .3;

}

这里的重点就是父元素的position一定是fixed,原本我们可以设置一个div就可以做到遮罩层的效果,但是传统浏览器不支持rgba的写法,所以只能使用上面的写法,分两个div

上一篇 下一篇

猜你喜欢

热点阅读