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

浏览数：17 / 时间：2015年06月09日

创建遮罩层

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