CSS实现 全屏 遮罩 - 勤学如春起之苗

CSS实现 全屏 遮罩

现在全屏的半透明遮罩层在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; /*--宽度的一半--*/

}