兼容多浏览器的页面遮罩层实现

　　最近一直在整理工作中用的到的代码，将一些通用的内容整理积累出来。遮罩顾名思义就是遮住页面的东西，常见的用途就是等待页面请求加载过程中，阻止其他操作，防止重复操作，等待上一操作完成后再移除遮罩，有些图片查看也使用类此效果。

 1 CL = Common.LightBox = {
 2     elemnt: null,
 3     init: function(){
 4         var html,height = '100%',position = 'fixed';
 5         if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
 6             height = window.screen.availHeight + 'px';
 7             position = "absolute";
 8         }
 9         if ($.browser.msie) {
10             html = '<div id="lightbox" style="left:0; background:rgb(150,150,150); top:0; width:100%; height:' + height + '; filter:alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;zoom:1; position:' + position + '; z-index:7; " >'
11             +'<iframe src="" marginwidth="0" framespacing="0" marginheight="0" frameborder="0" width="100%" height="100%" style="left:0; background:rgb(255,255,255); top:0; width:100%; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0;zoom:1; position:absolute; z-index: 9"></iframe>'
12             +'</div>';
13         } else {
14             html = '<div id="lightbox" style="left:0; background:rgb(150,150,150); top:0; width:100%; height:' + height + '; filter:alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;zoom:1; position:' + position + '; z-index:7; " ></div>';
15         }
16         this.element = $(html).appendTo(document.body);
17         this.count = 0;
18     },
19 
20     show: function(){
21         if(!this.element)this.init();
22         this.element.show();
23         this.setZIndex("+=2");
24         this.count < 0? this.count = 1: this.count++;
25         return this;
26     },
27 
28     hide: function(){
29         if(this.element){
30             this.count--;
31             this.setZIndex("-=2");
32             if(this.count<=0 || this.getZIndex()<9)
33                 this.element.hide();
34         }
35     },
36     getZIndex: function(){
37         if(this.element) return parseInt(this.element.css("zIndex")) || -1;
38     },
39     setZIndex: function(zIndex){
40         if(this.element) this.element.css("zIndex",zIndex || "+=2");
41     },
42     reset:function(){
43         if(this.element){
44             this.count = 0;
45             this.setZIndex(7);
46             this.element.hide();
47         }else{
48             this.init();
49         }
50         return this;
51     }
52 };

来源：https://www.cnblogs.com/zking/p/4152050.html

标签

遮罩层

position

element