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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。