jQuery遮罩层实现方法实例详解(附遮罩层插件)
本文实例分析了jQuery遮罩层实现方法。分享给大家供大家参考,具体如下:
1背景半透明遮罩层样式
需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式:
/*半透明的遮罩层*/ #overlay{ background:#000; filter:alpha(opacity=50);/*IE的透明度*/ opacity:0.5;/*透明度*/ display:none; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:100;/*此处的图层要大于页面*/ display:none; }
2jQuery实现遮罩
/*显示遮罩层*/ functionshowOverlay(){ $("#overlay").height(pageHeight()); $("#overlay").width(pageWidth()); //fadeTo第一个参数为速度,第二个为透明度 //多重方式控制透明度,保证兼容性,但也带来修改麻烦的问题 $("#overlay").fadeTo(200,0.5); } /*隐藏覆盖层*/ functionhideOverlay(){ $("#overlay").fadeOut(200); } /*当前页面高度*/ functionpageHeight(){ returndocument.body.scrollHeight; } /*当前页面宽度*/ functionpageWidth(){ returndocument.body.scrollWidth; }
3提示框
遮罩的目的无非让人无法操作内容,突出提示框,而提示框可参考上面的制作,z-index比遮罩层更高便可。主要问题是,如何控制提示框在浏览器居中。
/*定位到页面中心*/ functionadjust(id){ varw=$(id).width(); varh=$(id).height(); vart=scrollY()+(windowHeight()/2)-(h/2); if(t<0)t=0; varl=scrollX()+(windowWidth()/2)-(w/2); if(l<0)l=0; $(id).css({left:l+'px',top:t+'px'}); } //浏览器视口的高度 functionwindowHeight(){ varde=document.documentElement; returnself.innerHeight||(de&&de.clientHeight)||document.body.clientHeight; } //浏览器视口的宽度 functionwindowWidth(){ varde=document.documentElement; returnself.innerWidth||(de&&de.clientWidth)||document.body.clientWidth } /*浏览器垂直滚动位置*/ functionscrollY(){ varde=document.documentElement; returnself.pageYOffset||(de&&de.scrollTop)||document.body.scrollTop; } /*浏览器水平滚动位置*/ functionscrollX(){ varde=document.documentElement; returnself.pageXOffset||(de&&de.scrollLeft)||document.body.scrollLeft; }
补充:
jQuery简单遮罩层插件:
jQuery代码:
(function($){ $.fn.ShowMask=function(options){ vardefaults={ top:150, left:200 } varoptions=$.extend(defaults,options); $("html").append('<divid="ui-mask"></div><divid="ui-mask-div"style="z-index:99999;position:fixed;top:'+options.top+'px;left:'+options.left+'px;"><imgsrc="Images/ui-loading.gif"alt=""/><span>操作正在进行中,请耐心等待......</span></div>') _this_=$("#ui-mask"); _this_.height($(document).height()) _this_.show(); }; $.fn.HideMask=function(options){ _this_=$("#ui-mask"); _this_.remove(); }; })(jQuery);
css样式:
#ui-mask { background-color:#666; position:absolute; z-index:9999; left:0; top:0; display:none; width:100%; height:100%; opacity:0.5; filter:alpha(opacity=50); -moz-opacity:0.5; } #ui-mask-divimg { width:50px; height:50px; float:left; } #ui-mask-divspan { height:50px; line-height:50px; display:block; float:left; color:Red; font-weight:bold; margin-left:5px; }
使用方法:
functionbtn_save() { $(this).ShowMask(); $.post('url',null,function(d,s){ $(this).HideMask(); }); }
希望本文所述对大家jQuery程序设计有所帮助。