现在全屏的半透明遮罩层在web2.0网站应用非常广泛了,绝大多数遮罩是通过计算页面大小,然后覆盖一个与页面同等大小的层实现,如腾讯qzone, wordpress后台。这种方式本来无可非议,但是在页面很长的时候在IE8下会失效(国外资料的解释是与机器显卡相关),有些完美情节的同学遇到这个问题后就抓破了头,无奈之下甚至想让IE8强制使用IE7的方式解析他的作品。其实我们有一个更好的方法,咱们用CSS去解决它!
还记得“position:fixed”吗?它是css2的一个新增的属性,他可以让一个元素静止在页面上,拖动滚动条也不会动,如Qzone顶部固定的导航栏就是这样实现的。同样我们也可以用一个100%高宽的层覆盖浏览器视口,这样就可以实现全屏遮罩了。不用再计算页面的大小,调整浏览器大小的时候也不要去动态修改尺寸了。
遮罩 CSS:
.divBG
{
background: gray;
position: fixed;
left: 0px;
top: 0px;
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;
900px;
border-style: solid solid solid solid;
border- 5px 5px 5px 5px;
border-color: #cccc99;
left: 50%;
top: 50%;
margin-top: -200px; /*--高度的一半--*/
margin-left: -450px; /*--宽度的一半--*/
}