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程序设计有所帮助。