鸡啄米

首页|IT互联网|数码生活|软件开发|娱乐休闲|职场人生|编程课堂|Android开发网

Javascript实现等待对话框的实例

       在BS系统中，有时候一个业务操作需要花很多的时间处理，如果没有任何提示的话，用户还以为是没有点到会继续点击，造成二次点击，或者产生不耐烦的心里。所有最好加个滚动的提示，罩在页面上，一来控制用户再次点击，而来让用户感觉到计算机正在运行操作，如下图：

Javascript实现等待对话框的实例

       其实这个东东只要写很少的代码就能实现，JS代码如下：

JavaScript代码
  1. function $()   
  2. {   
  3.       var elements = new Array();   
  4.       for (var i = 0; i < arguments.length; i++)   
  5.       {   
  6.         var element = arguments[i];   
  7.         if (typeof element == 'string')   
  8.           element = document.getElementById(element);   
  9.         if (arguments.length == 1)   
  10.           return element;   
  11.         elements.push(element);   
  12.       }   
  13.       return elements;   
  14. }  
  15.   
  16.   
  17. function Show(message){  
  18.     HideElement();  
  19.     var eSrc=(document.all)?window.event.srcElement:arguments[1];  
  20.     var shield = document.createElement("DIV");//产生一个背景遮罩层  
  21.     shield.id = "shield";  
  22.     shield.style.position = "absolute";  
  23.     shield.style.left = "0px";  
  24.     shield.style.top = "0px";  
  25.     shield.style.width = "100%";  
  26.     shield.style.height = ((document.documentElement.clientHeight>document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight)+"px";  
  27.     //shield.style.height =document.body.scrollHeight;  
  28.     shield.style.background = "#333";  
  29.     shield.style.textAlign = "center";  
  30.     shield.style.zIndex = "10000";  
  31.     shield.style.filter = "alpha(opacity=0)";  
  32.     shield.style.opacity = 0;  
  33.   
  34.     var alertFram = document.createElement("DIV");//产生一个提示框  
  35.     var height="50px";  
  36.     alertFram.id="alertFram";  
  37.     alertFram.style.position = "absolute";  
  38.     alertFram.style.width = "200px";  
  39.     alertFram.style.height = height;  
  40.     alertFram.style.left = "35%";  
  41.     alertFram.style.top = "30%";  
  42.    // alertFram.style.marginLeft = "-225px" ;  
  43.    // alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";  
  44.     alertFram.style.background = "#fff";  
  45.     alertFram.style.textAlign = "center";  
  46.     alertFram.style.lineHeight = height;  
  47.     alertFram.style.zIndex = "10001";  
  48.   
  49.    strHtml =" <div style=\"width:100%; border:#58a3cb solid 1px; text-align:center;padding-top:10px \">";  
  50.    strHtml+=" <img src=\"load1.gif\"><br>";  
  51.    if (typeof(message)=="undefined"){  
  52.         strHtml+=" 正在服务器上执行, 请稍候";  
  53.     }   
  54.     else{  
  55.         strHtml+=message;  
  56.     }  
  57.    strHtml+=" </div>";  
  58.   
  59.     strHtml+="<iframe src=\"\" style=\"position:absolute; visibility:inherit;top:0px; left:0px; width:300px; height:100px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';\"></iframe>";//加个iframe防止被drowdownlist等控件挡住  
  60.   
  61.     alertFram.innerHTML=strHtml;  
  62.     document.body.appendChild(alertFram);  
  63.     document.body.appendChild(shield);  
  64.   
  65.     this.setOpacity = function(obj,opacity){  
  66.         if(opacity>=1)opacity=opacity/100;  
  67.         try{ obj.style.opacity=opacity; }catch(e){}  
  68.         try{   
  69.             if(obj.filters.length>0&&obj.filters("alpha")){  
  70.             obj.filters("alpha").opacity=opacity*100;  
  71.             }else{  
  72.             obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";  
  73.             }  
  74.         }  
  75.         catch(e){}  
  76.     }  
  77.   
  78.     var c = 0;  
  79.     this.doAlpha = function(){  
  80.     if (++c > 20){clearInterval(ad);return 0;}  
  81.     setOpacity(shield,c);  
  82.     }  
  83.     var ad = setInterval("doAlpha()",1);//渐变效果  
  84.   
  85.     eSrc.blur();  
  86.     document.body.onselectstart = function(){return false;}  
  87.     document.body.oncontextmenu = function(){return false;}  
  88. }  
  89.   
  90.    //隐藏页面上一些特殊的控件  
  91. function HideElement(){  
  92.     var HideElementTemp = new Array('IMG','SELECT','OBJECT','IFRAME');  
  93.     for(var j=0;j<HideElementTemp.length;j++){  
  94.         try{  
  95.                 var strElementTagName=HideElementTemp[j];  
  96.                 for(i=0;i<document.all.tags(strElementTagName).length; i++){  
  97.                     var objTemp = document.all.tags(strElementTagName)[i];  
  98.                     if(!objTemp||!objTemp.offsetParent)  
  99.                              continue;  
  100.                    //objTemp.style.visibility="hidden";  
  101.                    objTemp.disabled="disabled"  
  102.                 }  
  103.         }  
  104.         catch(e){}  
  105.     }  
  106. }  
  107.   
  108.   
  109. function Close(){  
  110.     var shield= $("shield");  
  111.     var alertFram= $("alertFram");  
  112.     if(shield!=null) {  
  113.         document.body.removeChild(shield);  
  114.     }  
  115.     if(alertFram!=null) {  
  116.         document.body.removeChild(alertFram);  
  117.     }   
  118.     document.body.onselectstart = function(){return true};  
  119.     document.body.oncontextmenu = function(){return true};  
  120. }  

       在asp.net页面上直接把此JS文件包括进来，调用Show方法就行，如  this.Button1.Attributes.Add("onClick","Show();");

Tags:Javascript | 2016/2/24 | 发表评论

相关文章: