js實現操作等待功能，防止重復提交，界面友好，底部為灰色遮罩層，防止用戶重復操作。
先看效果圖：
接着看js代碼：
1 //關閉等待窗口 2 function closeWaiting() { 3 var bgDiv = document.getElementById("bgDiv"); 4 var msgDiv = document.getElementById("msgDiv"); 5 //移除背景遮罩層div 6 if(bgDiv != null){ 7 document.body.removeChild(bgDiv); 8 } 9 //移除中間信息提示層div 10 if(msgDiv != null){ 11 document.body.removeChild(msgDiv); 12 } 13 } 14 //顯示等待窗口 15 function showWaiting() { 16 var msgw, msgh, bordercolor; 17 msgw = 300; //提示窗口的寬度 18 msgh = 100; //提示窗口的高度 19 bordercolor = "#336699"; //提示窗口的邊框顏色 20 titlecolor = "#99CCFF"; //提示窗口的標題顏色 21 22 var sWidth, sHeight; 23 sWidth = document.body.clientWidth; 24 sHeight = document.body.clientHeight; 25 26 //背景遮罩層div 27 var bgObj = document.createElement("div"); 28 bgObj.setAttribute('id', 'bgDiv'); 29 bgObj.style.position = "absolute"; 30 bgObj.style.top = "0px"; 31 bgObj.style.background = "#888"; 32 bgObj.style.filter = "progid:DXImageTransform 33 .Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; 34 bgObj.style.opacity = "0.6"; 35 bgObj.style.left = "0px"; 36 bgObj.style.width = sWidth + "px"; 37 bgObj.style.height = sHeight + "px"; 38 document.body.appendChild(bgObj); 39 40 //信息提示層div 41 var msgObj = document.createElement("div"); 42 msgObj.setAttribute("id", "msgDiv"); 43 msgObj.setAttribute("align", "center"); 44 msgObj.style.position = "absolute"; 45 msgObj.style.background = "white"; 46 msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; 47 msgObj.style.border = "1px solid " + bordercolor; 48 msgObj.style.width = msgw + "px"; 49 msgObj.style.height = msgh + "px"; 50 msgObj.style.top = (document.documentElement.scrollTop + (sHeight - msgh) / 2) + "px"; 51 msgObj.style.left = (sWidth - msgw) / 2 + "px"; 52 document.body.appendChild(msgObj); 53 54 //標題欄 55 var title = document.createElement("h4"); 56 title.setAttribute("id", "msgTitle"); 57 title.setAttribute("align", "left"); 58 title.style.margin = "0px"; 59 title.style.padding = "3px"; 60 title.style.background = bordercolor; 61 title.style.filter = "progid:DXImageTransform.Microsoft 62 .Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; 63 title.style.opacity = "0.75"; 64 title.style.border = "1px solid " + bordercolor; 65 title.style.height = "14px"; 66 title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 67 title.style.color = "white"; 68 title.innerHTML = "正在加載中，請稍候......"; 69 document.getElementById("msgDiv").appendChild(title); 70 71 //中間等待圖標 72 var img = document.createElement("img"); 73 img.style.margin = "10px 0px 10px 0px"; 74 img.style.width = "48px"; 75 img.style.height = "48px"; 76 img.setAttribute("src", "../images/waiting.gif"); 77 document.getElementById("msgDiv").appendChild(img); 78 }
點擊操作按鈕時的js方法如下：
1 function submitForm(flag){ 2 switch(flag){ 3 case 1: 4 //等待提示 5 showWaiting(); 6 break; 7 //do something else 8 } 9 document.forms[0].submit(); 10 }
操作成功，跳轉到正確頁面后需要關閉等待提示，在結果頁面調用closeWaiting();方法即可:
1 $(document).ready(parent.closeWaiting());
這是jQuery的寫法，記得引入jQuery包。
至此所有功能完成，很簡單的操作。
中間等待提示圖片留這里吧
