對於web應用程式開發者，當使用者進行介面瀏覽時如果後台程式處理程序時間較長，那麼使用者在網頁的等待時間會較長，但是如果頁面上沒有一個比較友善的提示方式
（增加蒙灰效果），那麼使用者體驗會不是特別良好，使用者不知道現在是否應該點擊別的程序，使用者並不知道是不是應該繼續等待網頁，還是可以點擊別的頁面。
現在就有一個比較良好的交互，就是增加蒙灰效果。像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果，當然jquery也提供了這種蒙灰方法。在此作者希望自己也能夠
使用原生的js實現自己的蒙灰效果。故自己做了嘗試。實現了蒙灰效果。在此我只關注實現，頁面美觀程度我沒有太多調整，所以頁面不太美觀。在此貼出實作代碼。
在CODE上查看程式碼片衍生到我的程式碼片
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.maskStyle {
background-color:#B8B8B8;
z-index:1;
filter:alpha(opacity=50);
opacity:0.8;
position:absolute;
text-align:center;
color:blue;
font:bold 1em "宋体",Arial,Times;
height:25px;
font-weight:bold;
overflow:hidden;
}
</style>
</HEAD>
<script type="text/javascript">
function creatMaskLayer(effectItem,showText) {
divItem = document.createElement("div");
divItem.className="maskStyle";
divItem.style.lineHeight=effectItem.offsetHeight+"px";
divItem.innerText=showText;
divItem.style.width=effectItem.offsetWidth;
divItem.style.height=effectItem.offsetHeight;
divItem.style.top=effectItem.offsetTop;
divItem.style.left=effectItem.offsetLeft;
return divItem;
}
function setMask() {
var effectItem = document.getElementById("test");
var existMaskItem = findMaskItem(effectItem);
if(existMaskItem) {
return;
}
var showText = "加载中...";
effectItem.appendChild(creatMaskLayer(effectItem,showText));
}
function removeMask() {
var effectItem = document.getElementById("test");
var maskItem = findMaskItem(effectItem);
if(maskItem) {
effectItem.removeChild(maskItem);
}
}
function findMaskItem(item) {
var children = item.children;
for(var i=0;i<children.length;i++) {
if("maskStyle"==(children[i].className)) {
return children[i];
}
}
}
</script>
<BODY>
<input type="button" value="蒙灰" onclick="setMask()"/>
<input type="button" value="取消蒙灰" onclick="removeMask()"/>
<br>
<div id="test" style="border:1px solid;width:300px;height:300px">
蒙灰我吧
<input type="button" value="测试是否还能点击" onclick="alert('OK!')"/>
</div>
</BODY>
</HTML>
解釋一下程式碼中比較重要的地方。
.maskStyle是蒙灰層的樣式
其中
在CODE上查看程式碼片衍生到我的程式碼片
filter:alpha(opacity=50); opacity:0.8;
是代表蒙灰層透明度，filter屬性是為了相容於IE8瀏覽器
z-index 屬性設定元素的堆疊順序。擁有較高堆疊順序的元素總是會處於堆疊順序較低的元素的前方。
PS：蒙灰效果需要把要蒙灰到element放到div中才可以
