大部分遮盖层都是通过JS去获取高度和宽度来定位的,而现在采用的大部分是CSS去做,除了一个为了兼容IE6所必要的js。
大致原理就是:让遮盖层的height和width达到100%来去实现,IE6下需要将body的height设为100%才有效。
具体的代码如下:
<!doctype html>
<html>
<head>
<title>CSS 实现遮盖层</title>
<meta charset="gb2312" />
<style>
/* the style for layer or mask */
body{_height:100%;}
#mask, #undermask{
display: none;
position:fixed;
_position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 33;
background-color: #101010;
filter: Alpha(opacity=40);
opacity: .4;
}
/* page show */
#page{width:960px;margin:0 auto;height:1000px;text-align:center;background-color:#c00;}
</style>
</head>
<body>
<div id="page">)))))))))))))CSS 实现遮盖层测试(((((((((((((((</div>
<div id="mask"></div>
<script>
(function(mask){
// for IE 6
if(document.uniqueID && !window.XMLHttpRequest){
document.getElementsByTagName('html')[0].style.overflow = 'hidden';
}
mask.style.display = 'block';
})(document.getElementById('mask'));
</script>
</body>
</html>
就是这样,很简单明了。