div遮罩

来源:互联网 发布:java判断闰年的条件 编辑:程序博客网 时间:2024/05/14 16:42
web页面中按钮执行处理时间过长,添加div等待层,提升用户体验


JavaScript 文件:




var coverLayer = {    
 divObj : null, 
 _coverTime : null,
 
// _coverRe : function()
// {//刷新遮盖层
//   this.divObj.style.width = window.screen.availWidth + "px";
//   this.divObj.style.height = window.screen.availHeight + "px"; 
// }, 
 
 on : function(noSave)
 { //打开遮盖层
  if(this.divObj == null)
  {
   this.divObj = document.createElement("div");
   this.divObj.style.zIndex = 10000;
   this.divObj.style.left = '0px';;
   this.divObj.style.top = '0px';;
   this.divObj.style.position = "absolute";
   this.divObj.style.backgroundColor = "#FFFFFF";  
   this.divObj.style.fontSize = "x-large";
   this.divObj.style.color = "#ff0000";
   this.divObj.style.textAlign ="center";
 
    this.divObj.innerText="处理中……";
    
    var tempFrame = document.createElement("iframe");
    tempFrame.style.filter = "Alpha(Opacity=0)";
    tempFrame.frameBorder=0;
    tempFrame.scrolling="no";
    tempFrame.style.width = "100%";
    tempFrame.style.height = "100%";
    this.divObj.appendChild(tempFrame);
    this.divObj.style.filter = "Alpha(Opacity=80)";
  
    document.body.appendChild(this.divObj);
  };


   this.divObj.style.width =  document.documentElement.clientWidth + "px";
   this.divObj.style.height =  document.documentElement.clientHeight + "px"; 
   this.divObj.style.paddingTop =document.documentElement.clientHeight / 2 + "px";


   
  this.divObj.style.display = "block";
 // clearInterval(this._coverTime);
 //this._coverTime = setInterval("coverLayer._coverRe()",1);
 },
 
 off : function(noSave)
 { //关闭遮盖层
  if(this.divObj){this.divObj.style.display = "none"};
  //clearInterval(this._coverTime);
 }
}










调用

OnClientClick="coverLayer.on();"
原创粉丝点击