源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

使用原生JS实现弹出层特效

  • 时间:2020-11-12 15:47 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:使用原生JS实现弹出层特效
创建遮罩层
[u]复制代码[/u] 代码如下:
  _createCover: function() {       var newMask = document.createElement("div");       newMask.id = this._mark;       newMask.style.position = "absolute";       newMask.style.zIndex = "100";       _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);       _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);       newMask.style.width = _scrollWidth + "px";       newMask.style.height = _scrollHeight + "px";       newMask.style.top = "0px";       newMask.style.left = "0px";       newMask.style.background = "#000";       newMask.style.filter = "alpha(opacity=50)";       newMask.style.opacity = "0.50";       newMask.style.display = 'none';       document.body.appendChild(newMask);       this._cover = newMask;   }
新建弹出层
[u]复制代码[/u] 代码如下:
  _createFloater: function(html) {       var newDiv = document.createElement("div");       newDiv.id = this._id;       newDiv.style.position = "absolute";       newDiv.style.zIndex = "9999";       newDivWidth = 400;       newDivHeight = 200;       newDiv.style.width = newDivWidth + "px";       newDiv.style.height = newDivHeight + "px";       newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";       newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";       newDiv.style.padding = "5px";       newDiv.style.display = 'none';       newDiv.innerHTML = html;       document.body.appendChild(newDiv);       this._floater = newDiv;   }
调节弹层位置
[u]复制代码[/u] 代码如下:
     addjustPosition: function() {          this._floater.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";          this._floater.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";      }
屏幕滚动事件时调整位置
[u]复制代码[/u] 代码如下:
this._fS = BindAsEventListener(this, this.addjustPosition); addEventHandler(window, "scroll", this._fS); // 隐藏后需 removeEventHandler(window, "scroll", this._fS);
完整代码
[u]复制代码[/u] 代码如下:
 var Floater = (function(){  var me = Class.create();  me.prototype = {      initialize: function(options) {          this._fS = BindAsEventListener(this, this.addjustPosition);          this.setOptions(options);      },      setOptions: function(options) {          this.options = options || {};          this._id = options.id;          this._mark = 'mark';      },      show: function(html,options) {          options = options || {};          if(!this._cover){              this._createCover();          }          if(!this._floater){              this._createFloater(html);          }          if(options.saveOpt){              this._saveOption = options.saveOpt;              this.bindSaveEvent();          }          this._bindScrollEvent();          this.addjustPosition();          this._floater.style.display = '';          this._cover.style.display = '';          this.isShow = true;      },      insert: function(html,opts,att){          var _e = document.createElement("div"), _t;          _e.innerHTML = html;          for(var k in opts){              _e[k] = opts[k];          }          _t = this._floater.querySelector('['+att+']');          if(_t){              _t.appendChild(_e);          }      },      getFloater: function(){          if(this._floater){              return this._floater;          }      },      //遮罩层      _createCover: function() {          var newMask = document.createElement("div");          newMask.id = this._mark;          newMask.style.position = "absolute";          newMask.style.zIndex = "100";          _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);          _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);          newMask.style.width = _scrollWidth + "px";          newMask.style.height = _scrollHeight + "px";          newMask.style.top = "0px";          newMask.style.left = "0px";          newMask.style.background = "#000";          newMask.style.filter = "alpha(opacity=50)";          newMask.style.opacity = "0.50";          newMask.style.display = 'none';          document.body.appendChild(newMask);          this._cover = newMask;      },      //新弹出层      _createFloater: function(html) {          var newDiv = document.createElement("div");          newDiv.id = this._id;          newDiv.style.position = "absolute";          newDiv.style.zIndex = "9999";          newDivWidth = 400;          newDivHeight = 200;          newDiv.style.width = newDivWidth + "px";          newDiv.style.height = newDivHeight + "px";          newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";          newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";          newDiv.style.padding = "5px";          newDiv.style.display = 'none';          newDiv.innerHTML = html;          document.body.appendChild(newDiv);          this._floater = newDiv;      },      //弹出层滚动居中      addjustPosition: function() {          this._floater.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";          this._floater.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";      },      bindSaveEvent: function() {          this._saveElem = this._floater.querySelector('['+this._saveOption.elem+']');          if(this._saveElem){              addEventHandler(this._saveElem, "click", this._saveOption.handler);          }      },      _bindScrollEvent: function() {          addEventHandler(window, "scroll", this._fS);      },      hide: function() {          this.isShow = false;          this.destory();      },      destory: function() {          removeEventHandler(window, "scroll", this._fS);          if(this._saveElem){              removeEventHandler(this._saveElem, "click", this._saveOption.handler);          }          if (this._cover){              document.body.removeChild(this._cover);          }          if (this._floater){              document.body.removeChild(this._floater);          }          this._cover = null;          this._floater = null;      }  };  return me;  })();
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部