CSS实现全屏遮罩

最新推荐文章于 2016-08-05 03:16:16 发布

转载最新推荐文章于 2016-08-05 03:16:16 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/wzzz/blog/115650

文章标签：

#php

为什么80%的码农都做不了架构师？>>>

现在全屏的半透明遮罩层在web2.0网站应用非常广泛了，绝大多数遮罩是通过计算页面大小，然后覆盖一个与页面同等大小的层实现，如腾讯qzone, wordpress后台。这种方式本来无可非议，但是在页面很长的时候在IE8下会失效（国外资料的解释是与机器显卡相关），有些完美情节的同学遇到这个问题后就抓破了头，无奈之下甚至想让IE8强制使用IE7的方式解析他的作品。其实我们有一个更好的方法，咱们用CSS去解决它！

还记得“position:fixed”吗？它是css2的一个新增的属性，他可以让一个元素静止在页面上，拖动滚动条也不会动，如Qzone顶部固定的导航栏就是这样实现的。同样我们也可以用一个100%高宽的层覆盖浏览器视口，这样就可以实现全屏遮罩了。不用再计算页面的大小，调整浏览器大小的时候也不要去动态修改尺寸了。

遮罩 CSS:

.divBG
{
    background: gray;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 20;
    filter: alpha(opacity=60);
    opacity: 0.6 !important;
}

弹出层 CSS:

.PopUp
{
    position: fixed;
    display: none;
    z-index: 21 !important;
    background-color: White;
    width: 900px;
    border-style: solid solid solid solid;
    border-width: 5px 5px 5px 5px;
    border-color: #cccc99;
    left: 50%;
    top: 50%;
    margin-top: -200px; /*--高度的一半--*/
    margin-left: -450px; /*--宽度的一半--*/
}