jQuery遮罩层实例讲解
本文实例为大家分享了jQuery遮罩层展示的具体代码，供大家参考，具体内容如下
1.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;
}
1.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;
}
1.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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。