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包。
至此所有功能完成,很简单的操作。
中间等待提示图片留这里吧