一、方法一
#cover{
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
opacity: 0.5;
-webkit-filter: alpha(opacity=50);
-moz-filter: alpha(opacity=50);
filter: alpha(opacity=50);
z-index: 2;
}
若用此方法，拉动滚动条时会出现页面下部遮罩层盖不住的情况，原因在于position取值为absolute，此时可以结合js或者jquery动态设置遮罩层的宽和高，从而实现全覆盖：
$("#cover").css({ "width": $(document).width(), "height": $(document).height() });
document.getElementById("cover").style.width = document.documentElement.clientWidth|document.body.clientWidth+"px";
document.getElementById("cover").style.height = document.documentElement.clientHeight|document.body.clientHeight+"px";
二、方法二
或者直接给position取值为 fixed，避免页面的滚动
#cover{
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
opacity: 0.5;
-webkit-filter: alpha(opacity=50);
-moz-filter: alpha(opacity=50);
filter: alpha(opacity=50);
z-index: 2;
}
