实现该效果可大致分为两步:一、让“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:expression(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>
三、效果图
转载于:https://blog.51cto.com/zorro/864888