蒙层效果

有的时候为了正在执行的操作，我们不想让用户现在对界面进行任何操作，只是让用户等待。这时，我们一般会锁定界面，给个进度条什么的。等用户的上次操作完成之后，又取消蒙层。这里参考相关资料弄个简单的：
<link rel="stylesheet" href="style/main_nonebg.css" type="text/css">
<style>
.content {
　　 width: 220px;
　　 white-space: nowrap;
　　 word-break: keep-all;
　　 overflow: hidden;
text-overflow: ellipsis;
height: 18px;
text-align: left;
}
.content2 {
width: 120px;
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
height: 18px;
text-align: left;
}

body,div {
text-align: center;
}

#lockbtn {
float: left;
margin-left: 50px;
cursor: hand;
}

#lockform,#locklayer {
position: absolute;
width: expression(this . parentNode . scrollWidth);
top: expression(this . parentNode . scrollTop); left =0;
height: 100%;
right: 0;
bottom: 0;
}

#lockform {
z-index: 1
}

#locklayer {
z-index: 1;
background-color: #AAA;
filter: alpha(opacity = 50);
}

#locktab {
position: absolute;
top: 250px;
left: expression(this . parentNode . scrollWidth/ 2 -150);
background-color: #FFFEFF;
z-index: 2;
width: 350px;
height: 30px;
border-style: double;
border-width: 2px;
border-color: green;
color: red;
font-size:20px;
font-face:italic;
}
</style>

function lock(menu) //开启蒙层{
menu.style.display="none"?'':''; //打开蒙版
document.cookie="lock=yes"; //设置cookies,使锁定长期有效,
}

function unlock(menu) //关闭蒙层
{
menu.style.display=""?'none':'none'; //去除蒙版,达到解锁
document.cookie="lock=no"; //设置cookie
return false;
}

<div id="lockform" style="display: none;">
<div id="locklayer">
<div id="locktab">
<center>
<img src="images/indicator.gif" width="20" height="20" /> 过程执行程序正在启动，请稍候...
</center>
</div>
</div>
</div>
然后在适当的时候调用开启蒙层方法和关闭蒙层就行了。