（三）原生JS实现 - 插件 - 弹出层

创建遮罩层

 1     _createCover: function() { 2         var newMask = document.createElement("div"); 3         newMask.id = this._mark; 4         newMask.style.position = "absolute"; 5         newMask.style.zIndex = "100"; 6         _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth); 7         _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); 8         newMask.style.width = _scrollWidth + "px"; 9         newMask.style.height = _scrollHeight + "px";10         newMask.style.top = "0px";11         newMask.style.left = "0px";12         newMask.style.background = "#000";13         newMask.style.filter = "alpha(opacity=50)";14         newMask.style.opacity = "0.50";15         newMask.style.display = 'none';16         document.body.appendChild(newMask);17         this._cover = newMask;18     }

新建弹出层

 1     _createFloater: function(html) { 2         var newDiv = document.createElement("div"); 3         newDiv.id = this._id; 4         newDiv.style.position = "absolute"; 5         newDiv.style.zIndex = "9999"; 6         newDivWidth = 400; 7         newDivHeight = 200; 8         newDiv.style.width = newDivWidth + "px"; 9         newDiv.style.height = newDivHeight + "px";10         newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";11         newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";12         newDiv.style.padding = "5px";13         newDiv.style.display = 'none';14         newDiv.innerHTML = html;15         document.body.appendChild(newDiv);16         this._floater = newDiv;17     }

调节弹层位置

1     addjustPosition: function() {2         this._floater.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";3         this._floater.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";4     }

屏幕滚动事件时调整位置

this._fS = BindAsEventListener(this, this.addjustPosition);addEventHandler(window, "scroll", this._fS);// 隐藏后需removeEventHandler(window, "scroll", this._fS);

完整代码

  1 var Floater = (function(){  2 var me = Class.create();  3 me.PRototype = {  4     initialize: function(options) {  5         this._fS = BindAsEventListener(this, this.addjustPosition);  6         this.setOptions(options);  7     },  8     setOptions: function(options) {  9         this.options = options || {}; 10         this._id = options.id; 11         this._mark = 'mark'; 12     }, 13     show: function(html,options) { 14         options = options || {}; 15         if(!this._cover){ 16             this._createCover(); 17         } 18         if(!this._floater){ 19             this._createFloater(html); 20         } 21         if(options.saveOpt){ 22             this._saveOption = options.saveOpt; 23             this.bindSaveEvent(); 24         } 25         this._bindScrollEvent(); 26         this.addjustPosition(); 27         this._floater.style.display = ''; 28         this._cover.style.display = ''; 29         this.isShow = true; 30     }, 31     insert: function(html,opts,att){ 32         var _e = document.createElement("div"), _t; 33         _e.innerHTML = html; 34         for(var k in opts){ 35             _e[k] = opts[k]; 36         } 37         _t = this._floater.querySelector('['+att+']'); 38         if(_t){ 39             _t.appendChild(_e); 40         } 41     }, 42     getFloater: function(){ 43         if(this._floater){ 44             return this._floater; 45         } 46     }, 47     //遮罩层 48     _createCover: function() { 49         var newMask = document.createElement("div"); 50         newMask.id = this._mark; 51         newMask.style.position = "absolute"; 52         newMask.style.zIndex = "100"; 53         _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth); 54         _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); 55         newMask.style.width = _scrollWidth + "px"; 56         newMask.style.height = _scrollHeight + "px"; 57         newMask.style.top = "0px"; 58         newMask.style.left = "0px"; 59         newMask.style.background = "#000"; 60         newMask.style.filter = "alpha(opacity=50)"; 61         newMask.style.opacity = "0.50"; 62         newMask.style.display = 'none'; 63         document.body.appendChild(newMask); 64         this._cover = newMask; 65     }, 66     //新弹出层 67     _createFloater: function(html) { 68         var newDiv = document.createElement("div"); 69         newDiv.id = this._id; 70         newDiv.style.position = "absolute"; 71         newDiv.style.zIndex = "9999"; 72         newDivWidth = 400; 73         newDivHeight = 200; 74         newDiv.style.width = newDivWidth + "px"; 75         newDiv.style.height = newDivHeight + "px"; 76         newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px"; 77         newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px"; 78         newDiv.style.padding = "5px"; 79         newDiv.style.display = 'none'; 80         newDiv.innerHTML = html; 81         document.body.appendChild(newDiv); 82         this._floater = newDiv; 83     }, 84     //弹出层滚动居中 85     addjustPosition: function() { 86         this._floater.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px"; 87         this._floater.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px"; 88     }, 89     bindSaveEvent: function() { 90         this._saveElem = this._floater.querySelector('['+this._saveOption.elem+']'); 91         if(this._saveElem){ 92             addEventHandler(this._saveElem, "click", this._saveOption.handler); 93         } 94     }, 95     _bindScrollEvent: function() { 96         addEventHandler(window, "scroll", this._fS); 97     }, 98     hide: function() { 99         this.isShow = false;100         this.destory();101     },102     destory: function() {103         removeEventHandler(window, "scroll", this._fS);104         if(this._saveElem){105             removeEventHandler(this._saveElem, "click", this._saveOption.handler);106         }107         if (this._cover){108             document.body.removeChild(this._cover);109         }110         if (this._floater){111             document.body.removeChild(this._floater);112         }113         this._cover = null;114         this._floater = null;115     }116 };117 return me;118 })();