js实现操作等待提示loading……

　　js实现操作等待功能，防止重复提交，界面友好，底部为灰色遮罩层，防止用户重复操作。

　　先看效果图：

　　接着看js代码：

 //关闭等待窗口

 function closeWaiting() {

     var bgDiv = document.getElementById("bgDiv");

     var msgDiv = document.getElementById("msgDiv");

     //移除背景遮罩层div

     if(bgDiv != null){

         document.body.removeChild(bgDiv);

     }

     //移除中间信息提示层div

     if(msgDiv != null){

         document.body.removeChild(msgDiv);

     }

 }

 //显示等待窗口

 function showWaiting() {

     var msgw, msgh, bordercolor;

     msgw = 300; //提示窗口的宽度

     msgh = 100; //提示窗口的高度

     bordercolor = "#336699"; //提示窗口的边框颜色

     titlecolor = "#99CCFF"; //提示窗口的标题颜色 

     var sWidth, sHeight;

     sWidth = document.body.clientWidth;

     sHeight = document.body.clientHeight;

     //背景遮罩层div

     var bgObj = document.createElement("div");

     bgObj.setAttribute('id', 'bgDiv');

     bgObj.style.position = "absolute";

     bgObj.style.top = "0px";

     bgObj.style.background = "#888";

     bgObj.style.filter = "progid:DXImageTransform

         .Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";

     bgObj.style.opacity = "0.6";

     bgObj.style.left = "0px";

     bgObj.style.width = sWidth + "px";

     bgObj.style.height = sHeight + "px";

     document.body.appendChild(bgObj);

     //信息提示层div

     var msgObj = document.createElement("div");

     msgObj.setAttribute("id", "msgDiv");

     msgObj.setAttribute("align", "center");

     msgObj.style.position = "absolute";

     msgObj.style.background = "white";

     msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";

     msgObj.style.border = "1px solid " + bordercolor;

     msgObj.style.width = msgw + "px";

     msgObj.style.height = msgh + "px";

     msgObj.style.top = (document.documentElement.scrollTop + (sHeight - msgh) / 2) + "px";

     msgObj.style.left = (sWidth - msgw) / 2 + "px";

     document.body.appendChild(msgObj);

     //标题栏

     var title = document.createElement("h4");

     title.setAttribute("id", "msgTitle");

     title.setAttribute("align", "left");

     title.style.margin = "0px";

     title.style.padding = "3px";

     title.style.background = bordercolor;

     title.style.filter = "progid:DXImageTransform.Microsoft

         .Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";

     title.style.opacity = "0.75";

     title.style.border = "1px solid " + bordercolor;

     title.style.height = "14px";

     title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";

     title.style.color = "white";

     title.innerHTML = "正在加载中，请稍候......";

     document.getElementById("msgDiv").appendChild(title);

     //中间等待图标

     var img = document.createElement("img");

     img.style.margin = "10px 0px 10px 0px";

     img.style.width = "48px";

     img.style.height = "48px";

     img.setAttribute("src", "../images/waiting.gif");

     document.getElementById("msgDiv").appendChild(img);

 }

　　点击操作按钮时的js方法如下：

 function submitForm(flag){

     switch(flag){

         case 1:

             //等待提示

             showWaiting();

             break;

         //do something else

     }

     document.forms[0].submit();

 }

　　操作成功，跳转到正确页面后需要关闭等待提示，在结果页面调用closeWaiting();方法即可:

 $(document).ready(parent.closeWaiting());

　　这是jQuery的写法，记得引入jQuery包。

　　至此所有功能完成，很简单的操作。

　　中间等待提示图片留这里吧

巴特西

js实现操作等待提示loading……

最新文章

热门文章