创建遮罩层
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 })();