实现该效果可大致分为两步：一、让“please wait...”图片始终显示在屏幕中央；二、设置mask层，将“please wait...”图片下的页面进行遮罩住。

一、让“please wait...”图片始终显示屏幕中央

1. //让指定的DIV始终显示在屏幕正中间
2. function letDivCenter(divName){
3. var top = ($(window).height() - $(divName).height())/2;
4. var left = ($(window).width() - $(divName).width())/2;
5. var scrollTop = $(document).scrollTop();
6. var scrollLeft = $(document).scrollLeft();
7. $(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();
8. }

二、设置mask层

1. <style type="text/css">
2. #LockWindows{
3. position:absolute; top:10px; left:10px; background-color:#777777; z-index:2; display:none;
4. /* Moz Family使用私有属性-moz-opacity: 0.70 */
5. /* IE 使用私有属性filter */
6. /* 标准属性opacity支持CSS3的浏览器（FF 1.5也支持）*/
7. opacity: 0.70;
8. filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=70,finishOpacity=100);
9. width:e­xpression(documentElement.clientWidth < 900?(documentElement.clientWidth==0?(body.clientWidth<900?'900':'auto'):'900px'):'auto');
10. }
11. #WindowDIV{position:absolute; z-index:3; background-color:#FFFFFF; border:#000000 solid 1px; display:none;}
12. </style>

1. <script type="text/javascript">
2. //隐藏下拉框，以解决下拉框优先度太高的问题，
3. function _displaySelect(){
4. var selects=document.getElementsByTagName("select");//整个页面的所有下拉框
5. var objWindow =   $("WindowDIV");
6. var DIVselects = objWindow.getElementsByTagName("select");//整个弹出层的所有下拉框
7. for(var i=0;i<selects.length;i++){
8. if(selects[i].style.visibility){
9. selects[i].style.visibility="";
10. }else{
11. selects[i].style.visibility="hidden";
12. for(var j=0; i<DIVselects.length; j++){
13. DIVselects[j].style.visibility="";
14. }
15. }
16. }
17. }
18. function openWindows(width,height){
19. var objWindow =   $("WindowDIV");
20. var objLock =   $("LockWindows");//这个是用于在IE下屏蔽内容用
21. objLock.style.display="block";
22. objLock.style.width=document.body.clientWidth+"px";
23. objLock.style.height=document.body.clientHeight+"px";
24. objLock.style.minWidth=document.body.clientWidth+"px";
25. objLock.style.minHeight=document.body.clientHeight+"px";
26. // 判断输入的宽度和高度是否大于当前浏览器的宽度和高度
27. if(width>document.body.clientWidth) width = document.body.clientWidth+"px";
28. if(height>document.body.clientHeight) height = document.body.clientHeight+"px";
29. objWindow.style.display='block';
30. objWindow.style.width = width+"px";
31. objWindow.style.height = height+"px";
32. // 将弹出层居中
33. objWindow.style.left=(document.body.offsetWidth-width)/2+"px";
34. objWindow.style.top=(document.body.offsetHeight-height)/2+"px";
35. _displaySelect();
36. }
37. function hiddenWindows(){
38. $("LockWindows").style.display='none';
39. $("WindowDIV").style.display='none';
40. _displaySelect();
41. }
42. </script>
43. <div id="LockWindows"> </div>
44. <div id="WindowDIV">
45. <%@ include file="../examination/openEditerDiv.jsp"%>
46. </div>

三、效果图