开发学院网页设计 JavaScript 忙里偷闲写的jquery的屏遮层插件阅读

忙里偷闲写的jquery的屏遮层插件

　2010-09-14 13:47:44　来源：WEB开发网　　　

核心提示：今天看到一同事做弹出框，做背景遮蔽层，忙里偷闲写的jquery的屏遮层插件，捣鼓来捣鼓去的就是问题大堆，看不过去了，1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xht

今天看到一同事做弹出框，做背景遮蔽层，捣鼓来捣鼓去的就是问题大堆，看不过去了，顺手做了个jquery的插件，其实很头痛的，我不怎么喜欢用jquery，所以没看过它的api，倒是看过它的源码，于是我临时下载了份jquery的api文档，临阵磨枪，总算捣鼓出来了，交给他们却不用，因为我才来这里没多久，他们都老员工了，总觉的自己比我能干，也不愿意用我的代码，汗，怎么说也不用我的，多好的代码，丢了可惜，就放这里共享了。

希望对大家有用小插件来的，见笑了啊各位，

代码呈上，测试通过的浏览器有ie6,ie7,ie8, ff,oprea,safari等。　

　　1　<!DOCTYPE　html　PUBLIC　"-//W3C//DTD　XHTML　1.0　Transitional//EN"　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 　2　<HTML> 　3　　<HEAD> 　4　　　<TITLE>　New　Document　</TITLE> 　5　　　<META　NAME="Generator"　CONTENT="EditPlus"> 　6　　　<META　NAME="Author"　CONTENT=""> 　7　　　<META　NAME="Keywords"　CONTENT=""> 　8　　　<META　NAME="Description"　CONTENT=""> 　9　　　<SCRIPT　src="./jquery.js"　type="text/javascript"></SCRIPT> 10　　　<style> 11　　　　　　body　{margin:0;padding:0;} 12　　　</style> 13　　</HEAD> 14　 15　　<BODY> 16　　<select　id="s"><option>测试ie6下select的bug</option></select><br> 17　　基于jquery的屏蔽层插件　　　create　　　李涛<br> 18　　兼容浏览器屏蔽层，支持ie6,7,8　ff　　　chrome　　safari　oprea等主流浏览器。<br> 19　　使用方法<br> 20　　var　o=new　$.OverLay({Opacity:10,Color:"red",zIndex:500});<br> 21　　o.Show()显示<br> 22　　o.Close()为关闭该屏蔽层<br> 23　　参数说明　{Opacity:10,Color:"red",zIndex:500}　该参数为屏蔽层配置　Opacity为透明度　color为屏蔽层的颜色zindex为屏蔽层的zindex值<br> 24　　<span　style="color:blue">参数可以为空　既var　o=new　$.OverLay();因为该插件培植有默认项</span> 25　　<br><br><br><br><br> 26　　 27　　　<script> 28　var　isIE6　=　$.browser.msie　&&　([/MSIE　(d).0/i.exec(navigator.userAgent)][0][1]　==　6);//因为jquery不能很好的判断ie6 29　(function($){ 30　$.OverLay　=　(function(){return　function(){this.initialize.apply(this,　arguments);}})(); 31　$.OverLay.prototype　=　{ 32　　　initialize:　function(options){ 33　　　　　this.SetOptions(options);　　　　 34　　　　　this.Lay　=　$(document.createElement("div")); 35　　　　　$('body').append(this.Lay) 36　　　　　this.Color　=　this.options.Color; 37　　　　　this.Opacity　=　parseInt(this.options.Opacity); 38　　　　　this.zIndex　=　parseInt(this.options.zIndex);　　　　 39　　　　　this.Lay.css({display:"none",　zIndex:this.zIndex,left:0,top:0,position:"fixed",width:"100%",height:"100%"}) 40　　　　　if(isIE6){ 41　　　　　　　　　this.Lay.css({position　:　"absolute"}); 42　　　　　　　　　this._resize　=(function(object,　fun)　{ 43　　　　　　　　　　　　　　　　　return　function()　{ 44　　　　　　　　　　　　　　　　　　　　　return　fun.apply(object,　arguments); 45　　　　　　　　　　　　　　　　　} 46　　　　　　　　　　　　　})(this,function(){ 47　　　　　　　　　　　　　this.Lay.css({width:Math.max(document.documentElement.scrollWidth,　document.documentElement.clientWidth)　+　"px",height:Math.max(document.documentElement.scrollHeight,　document.documentElement.clientHeight)　+　"px"}); 48　　　　　　　　　　　　　}) 49　　　　　　　　　 50　　　　　　　　　this.Lay.html('<iframe　style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>'); 51　　　　　} 52　　　}, 53　　　SetOptions:　function(options)　{ 54　　　　　this.options　=　{Color:"#666",Opacity:50,zIndex:1000}; 55　　　　　jQuery.extend(this.options,options　||　{});　　 56　　　}, 57　　　Show:　function()　{ 58　　　　　if(isIE6){　this._resize();　$(window).resize(this._resize)} 59　　　　　this.Lay.css({backgroundColor:this.Color,display:"block",position:"absolute"}) 60　　　　　if($.browser.msie)　{this.Lay.css({filter　:　"alpha(opacity:"　+　this.Opacity　+　")"})}　else　{this.Lay.css({opacity　:　this.Opacity　/　100})} 61　　　}, 62　　　Close:　function()　{ 63　　　　　this.Lay.css({display　:　"none"}); 64　　　　　if(isIE6){　$(window).resize(function(){})} 65　　　} 66　};})(jQuery) 67　 68　 69　///下面为调用实例 70　var　o 71　var　open11=function(){ 72　　　　o=new　$.OverLay({Opacity:10,Color:"red"}); 73　　　　o.Show();　　　 74　　　　setTimeout("o.Close()",3000);　　//三秒后关闭该屏蔽层　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 75　} 76　　　　 77　 78　</script> 79　　　<input　type="button"　onclick="open11()"　value="点击测试，屏蔽层将在三秒后关闭"> 80　 81　　</BODY> 82　</HTML>