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

创建遮罩层
代码如下:
  _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";
     }