首页 > 代码库 > 兼容多浏览器的页面遮罩层实现

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

2024-08-06 21:43:54   215人阅读

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

 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 };

 

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


联系
我们