(基于考虑博友的建议，深刻反省，之前的描述较为矫情，特此干掉，我什么都不说！)
希望对大家有用 小插件来的，见笑了啊各位，
代码呈上，测试通过的浏览器有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>
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>
83
posted on
