實現“Please wait...”效果

實現該效果可大致分為兩步：一、讓“please wait...”圖片始終顯示在螢幕中央；二、設定mask層，將“please wait...”圖片下的頁面進行遮罩住。

一、讓“please wait...”圖片始終顯示螢幕中央

 

 

  
//讓指定的DIV始終顯示在螢幕正中間  
  
    function letDivCenter(divName){   
  
        var top = ($(window).height() - $(divName).height())/2;   
  
        var left = ($(window).width() - $(divName).width())/2;   
  
        var scrollTop = $(document).scrollTop();   
  
        var scrollLeft = $(document).scrollLeft();   
  
        $(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();  
  
    } 
 

二、設定mask層

 

 

  
<style type="text/css">  
  
#LockWindows{  
  
     position:absolute; top:10px; left:10px; background-color:#777777; z-index:2; display:none;  
  
     /* Moz Family使用私人屬性-moz-opacity: 0.70 */ 
  
     /* IE 使用私人屬性filter */ 
  
     /* 標準屬性opacity支援CSS3的瀏覽器FF 1.5也支援）*/ 
  
     opacity: 0.70;  
  
     filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=70,finishOpacity=100);  
  
     width:e­xpression(documentElement.clientWidth < 900?(documentElement.clientWidth==0?(body.clientWidth<900?'900':'auto'):'900px'):'auto');  
  
}  
  
#WindowDIV{position:absolute; z-index:3; background-color:#FFFFFF; border:#000000 solid 1px; display:none;}  
  
</style>  
 

 

 

  
<script type="text/javascript"> 
  
//隱藏下拉框，以解決下拉框優先度太高的問題，    
  
function _displaySelect(){  
  
     var selects=document.getElementsByTagName("select");//整個頁面的所有下拉框  
  
     var objWindow =   $("WindowDIV");  
  
     var DIVselects = objWindow.getElementsByTagName("select");//整個彈出層的所有下拉框  
  
     for(var i=0;i<selects.length;i++){  
  
         if(selects[i].style.visibility){  
  
             selects[i].style.visibility="";  
  
         }else{  
  
             selects[i].style.visibility="hidden";  
  
             for(var j=0; i<DIVselects.length; j++){  
  
                 DIVselects[j].style.visibility="";  
  
             }  
  
         }  
  
     }  
  
}  
  
function openWindows(width,height){   
  
     var objWindow =   $("WindowDIV");  
  
     var objLock =   $("LockWindows");//這個是用於在IE下屏蔽內容用  
  
     objLock.style.display="block";  
  
     objLock.style.width=document.body.clientWidth+"px";  
  
     objLock.style.height=document.body.clientHeight+"px";  
  
     objLock.style.minWidth=document.body.clientWidth+"px";  
  
     objLock.style.minHeight=document.body.clientHeight+"px";  
  
// 判斷輸入的寬度和高度是否大於當前瀏覽器的寬度和高度  
  
     if(width>document.body.clientWidth) width = document.body.clientWidth+"px";  
  
     if(height>document.body.clientHeight) height = document.body.clientHeight+"px";  
  
     objWindow.style.display='block';  
  
     objWindow.style.width = width+"px";  
  
     objWindow.style.height = height+"px";  
  
// 將彈出層置中  
  
     objWindow.style.left=(document.body.offsetWidth-width)/2+"px";  
  
     objWindow.style.top=(document.body.offsetHeight-height)/2+"px";  
  
     _displaySelect();  
  
}  
  
function hiddenWindows(){  
  
     $("LockWindows").style.display='none';  
  
     $("WindowDIV").style.display='none';  
  
     _displaySelect();  
  
}  
  
</script> 
  
   
  
<div id="LockWindows"> </div> 
  
<div id="WindowDIV">       
  
     <%@ include file="../examination/openEditerDiv.jsp"%> 
  
</div> 
 

 三、

 

650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/attachment/201205/191128400.png" />

 

本文出自 “左羅CTO” 部落格，請務必保留此出處http://zorro.blog.51cto.com/2139862/864888