네이티브 JS를 사용하여 팝업 레이어 효과 구현_javascript 기술

创建遮罩层

复代码 代码如下:

  _createCover: 함수() {
      var newMask = document.createElement("div");
      newMask.id = this._mark;
      newMask.style.position = "절대";
      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 = "알파(불투명도=50)";
      newMask.style.opacity = "0.50";
      newMask.style.display = '없음';
      document.body.appendChild(newMask);
      this._cover = newMask;
  }

새로운 판매처

复主代码 代码如下:

  _createFloater: 함수(html) {
      var newDiv = document.createElement("div");
      newDiv.id = this._id;
      newDiv.style.position = "절대";
      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 = '없음';
      newDiv.innerHTML = html;
      document.body.appendChild(newDiv);
      this._floater = newDiv;
  }

调节弹层位置

复主代码 代码如下:

     addjustPosition: 함수() {
         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";
     }

屏幕滚动事件时调整位置

复主代码 代码如下:

this._fS = BindAsEventListener(this, this.addjustPosition);
addEventHandler(window, "scroll", this._fS);
// 隐藏后需
RemoveEventHandler(window, "scroll", this._fS);

完整代码

复主代码 代码如下:

 var 플로터 = (함수(){
 var me = Class.create();
 me.prototype = {
     초기화: 함수(옵션) {
         this._fS = BindAsEventListener(this, this.addjustPosition);
         this.setOptions(옵션);
     },
     setOptions: 함수(옵션) {
         this.options = 옵션 || {};
         this._id = 옵션.id;
         this._mark = '마크';
     },
     표시: 함수(html,옵션) {
         옵션 = 옵션 || {};
         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;
     },
     삽입: 함수(html,opts,att){
         var _e = document.createElement("div"), _t;
         _e.innerHTML = html;
         for(var k in opts){
             _e[k] = 선택[k];
         }
         _t = this._floater.querySelector('[' att ']');
         if(_t){
             _t.appendChild(_e);
         }
     },
     getFloater: 함수(){
         if(this._floater){
             return this._floater;
         }
     },
     //遮罩层
     _createCover: 함수() {
         var newMask = document.createElement("div");
         newMask.id = this._mark;
         newMask.style.position = "절대";
         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 = "알파(불투명도=50)";
         newMask.style.opacity = "0.50";
         newMask.style.display = '없음';
         document.body.appendChild(newMask);
         this._cover = newMask;
     },
     //신규출판
     _createFloater: 함수(html) {
         var newDiv = document.createElement("div");
         newDiv.id = this._id;
         newDiv.style.position = "절대";
         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 = '없음';
         newDiv.innerHTML = html;
         document.body.appendChild(newDiv);
         this._floater = newDiv;
     },
     //弹层滚动居中
     addjustPosition: 함수() {
         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";
     },
     바인딩SaveEvent: 함수() {
         this._saveElem = this._floater.querySelector('[' this._saveOption.elem ']');
         if(this._saveElem){
             addEventHandler(this._saveElem, "클릭", this._saveOption.handler);
         }
     },
     _bindScrollEvent: 함수() {
         addEventHandler(window, "scroll", this._fS);
     },
     숨기기: 함수() {
         this.isShow = false;
         this.destory();
     },
     파괴: 함수() {
         RemoveEventHandler(window, "scroll", this._fS);
         if(this._saveElem){
             RemoveEventHandler(this._saveElem, "클릭", 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;
     }
 };
 돌려주세요;
 })();