好用的遮罩层代码

css代码:

#cover{
position:fixed;
display:none;
z-index:1;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(0, 0, 0, 0.50);
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
}
#coverShow{
display:none;
position:fixed;
z-index:2;
top:50%;
left:50%;
border:1px solid #009800;
width:300px;
height:100px;
margin-left:-150px;
margin-top:-150px;
background:#009800;
}

html代码:

<div id="cover">
</div>

<div id="coverShow">
<table align="center" border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse; height: 100px; min-height: 100px;" bgcolor="#009800">
<tr>
<td height="30" style="font-size: 12px;">数据加载中，请稍后......</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff"><img src="images/loading.gif" alt="" /></td>
</tr>
</table>
</div>

 

js代码：

function coverit() {
var cover = document.getElementById("cover");
var covershow = document.getElementById("coverShow");
cover.style.display = 'block';
covershow.style.display = 'block';
}
function hidden_coverit() {
var cover = document.getElementById("cover");
var covershow = document.getElementById("coverShow");
cover.style.display = 'none';
covershow.style.display = 'none';
}

转载于:https://www.cnblogs.com/mjbenkyo/p/8387083.html