首页 > 代码库 > （三）原生JS实现 - 插件 - 弹出层
（三）原生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 })();
（三）原生JS实现 - 插件 - 弹出层
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。