實現(xiàn)該效果可大致分為兩步：一、讓“please wait...”圖片始終顯示在屏幕中央；二、設(shè)置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(); ?

????}?

二、設(shè)置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">?

//隱藏下拉框，以解決下拉框優(yōu)先度太高的問題，?? ?

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下屏蔽內(nèi)容用 ?

?????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>?

?三、效果圖

?

?

轉(zhuǎn)載于:https://blog.51cto.com/zorro/864888

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的实现“Please wait...”效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。