(精华)2020年6月28日 JavaScript高级篇 弹框封装

愚公搬代码
123 阅读2分钟 
var createMsgWin = {
    init(param) {
        var initParam = {
            title: '友情提示', //标题
            tips: "没有任何提示信息！", //主体内容
            btnOk: '确定', //确定按钮文字
            btnNo: '取消', //取消按钮文字
            area: ['250', '210'], //自定义弹框大小
            closeOnClickModal: true, // 是否可以通过点击modal关闭
            dir: 'RT',
            hasShade: true, //是否需要遮罩层
            isShowBtnNo: true, //是否需要显示取消按钮
            defineCls: '', //自定义样式
            funcOk: function () { // 点击确定执行的方法
            },
            funcNo: function () { // 点击取消执行的方法
            }
        };

        this.paramEnd = Object.assign({}, initParam, param);
        this.body = document.getElementsByTagName('body')[0];

        //遮罩层
        if (this.paramEnd.hasShade) {
            this.bgObj = document.createElement("DIV");
            this.bgObj.style.cssText = "width:100%;height:100%;position:fixed;z-index: 990;top: 0px;left: 0px;background: #000000;filter: alpha(Opacity=30); -moz-opacity:0.30;opacity:0.30;";
            this.body.appendChild(this.bgObj);
        }
        //   this.drawHTML(); 
        this.drawHTML2();
        this.eventFun();
        this.dragTitle();
    },
    drawHTML() {
        //main
        this.tipWinObj = document.createElement('div');
        this.tipWinObj.className = 'tip-window-layer';
        if (this.paramEnd.defineCls) {

            this.tipWinObj.classList.add(this.paramEnd.defineCls);
        }

        //top区域
        var topDiv = document.createElement('div');
        topDiv.className = 'tip-header-section';

        var titDiv = document.createElement("DIV");
        titDiv.className = 'tip-title';
        titDiv.innerHTML = this.paramEnd.title;

        var cross = document.createElement("DIV");
        cross.className = 'tip-icon-close';
        cross.innerHTML = 'X';

        var contentDiv = document.createElement("DIV");
        contentDiv.className = 'tip-main-content';
        contentDiv.innerHTML = this.paramEnd.tips;

        //bottom区域
        var bottomDiv = document.createElement("DIV");
        bottomDiv.className = 'tip-bottom-section';

        var okBtn = document.createElement("BUTTON");
        okBtn.className = 'btnOk';
        okBtn.innerHTML = this.paramEnd.btnOk;

        var noBtn = document.createElement("BUTTON");
        noBtn.className = 'btnNo';
        noBtn.innerHTML = this.paramEnd.btnNo;

        topDiv.appendChild(titDiv);
        topDiv.appendChild(cross);
        this.tipWinObj.appendChild(topDiv);
        this.tipWinObj.appendChild(contentDiv);


        this.paramEnd.isShowBtnNo && bottomDiv.appendChild(noBtn);
        bottomDiv.appendChild(okBtn);
        this.tipWinObj.appendChild(bottomDiv);

        this.body.appendChild(this.tipWinObj);
    },

    drawHTML2() {
        this.tipWinObj = document.createElement('div');
        this.tipWinObj.className = 'tip-window-layer';
        this.tipWinObj.style.cssText = ';width:' + this.paramEnd.area[0] + 'px;height:' + this.paramEnd.area[1] + 'px;';
        // this.tipWinObj.style = '';

        if (this.paramEnd.defineCls) {
            this.tipWinObj.classList.add(this.paramEnd.defineCls);
        }

        var tipWinInner = `
            <div class="tip-header-section">
                <div class="tip-title">${this.paramEnd.title}</div> 
                <div class="tip-icon-close">X</div>
            </div>
            <div class="tip-main-content">${this.paramEnd.tips}</div>
            <div class="tip-bottom-section">
                ${this.paramEnd.isShowBtnNo ? '<button type="button" class="btnOk">'+this.paramEnd.btnOk+'</button>':''}    
                <button type="button" class="btnNo">${this.paramEnd.btnNo}</button>
            </div>
        `;
        this.tipWinObj.innerHTML = tipWinInner;
        this.body.appendChild(this.tipWinObj);

    },
    eventFun() {
        this.tipWinObj.addEventListener('click', function (ev) {
            var target = ev.target,
                clsName = target.className;
            switch (clsName) {
                case 'btnOk':
                    //loading
                    this.showLoading();
                    this.paramEnd.funcOk(function (res) {
                        console.log(res);
                        if (!res) {
                            return;
                        }
                        //隐藏box
                        this.removeLoading();
                        this.body.removeChild(this.tipWinObj);
                        this.paramEnd.hasShade && this.body.removeChild(this.bgObj);
                        console.log('ppp');
                    }.bind(this))
                    break;
                case 'tip-icon-close':
                case 'btnNo':
                    this.body.removeChild(this.tipWinObj);
                    this.paramEnd.hasShade && this.body.removeChild(this.bgObj);
                    break;

            }
        }.bind(this), false);

        if (this.paramEnd.hasShade && this.paramEnd.closeOnClickModal) {
            this.bgObj.onclick = function () {
                this.body.removeChild(this.tipWinObj);
                this.body.removeChild(this.bgObj);
            }.bind(this);
        }
    },
    showLoading() {
        this.loading = document.createElement('div');
        this.loading.innerHTML = 'loading...';
        this.loading.className = 'loading-msg-tip';
        document.body.appendChild(this.loading);
    },
    removeLoading() {
        document.body.removeChild(this.loading);
    },
    //拖动标题可移动
    dragTitle() {
        var headerTop = this.tipWinObj.querySelector('.tip-header-section');
        var moveFlag = false;
        var dis = {};
        headerTop.onmousedown = function (e) {
            moveFlag = true;
            headerTop.style.cursor = 'move';
            //计算鼠标落下点与边界的距离
            dis.x = e.clientX - this.tipWinObj.offsetLeft;
            dis.y = e.clientY - this.tipWinObj.offsetTop;

        }.bind(this);

        this.body.onmousemove = function (e) {
            if (!moveFlag) {
                return;
            }
            //跟你局拖拽距离设置当前拖拽元素的位置
            this.tipWinObj.style.left = (e.clientX - dis.x) + 'px';
            this.tipWinObj.style.top = (e.clientY - dis.y) + 'px';

        }.bind(this);

        headerTop.onmouseup = function () {
            moveFlag = false;
            headerTop.removeAttribute('style');
        }

    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pop win</title>
    <link href="./main.css" rel="stylesheet" /> 
    <style>
    .test-dom {
        width:160px;
        height:50px;
        background: red;
    }
    h1.title {
        font-weight: bold;
        font-size: 14px;
    }
    </style>
</head>
<body>
    <div class="box-out" id="boxOut" >
        <button type="button" id="setbtn" > 按钮</button>
    </div>
    <div id="testDom" class="test-dom" style="display: none;">
        <h1 class="title">标题</h1>
        <p>ddfddf</p>
        <p>mmm</p>
    </div>
    <script src="./main2.js"></script>
    <script>
         setbtn.onclick = function(){
            createMsgWin.init({
                tips:document.getElementById('testDom').innerHTML,   //主体内容
                area:['400','300'],
                defineCls:'test-dom',
                funcOk:function(callback){
                    console.log('oo');
                      //loading
                      //调接口
                      //隐藏loading
                      setTimeout(function(){
                        callback && callback(true);
                      },2000) 
                }
            });
        }
     
    </script>
</body>
</html>

/*pop window*/
 .tip-window-layer {
    position: absolute;
    right:0;
    top:0;
    border: 1px solid #E6EAEE;
    padding:0 0px 10px 0px;
    z-index: 999;
    background: #fff;
    border-radius: 4px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

  }
  .tip-header-section {
    height:35px;
    line-height:35px;
    font-size:14px;
    background:#fff;
    border-bottom: 1px solid #f2f2f2;
  }
  .tip-title {
    float:left;
    width:80%;
    margin-left:5px;
    color: #000;
  }
  .tip-icon-close {
    float:right; cursor:pointer;margin-right:5px;
    color: #666;
  }
  .tip-main-content {
    min-height: 180px;
    height:auto;
    overflow:hidden;
    line-height:24px;
    text-align:center;
    margin-top:10px;
    box-sizing: border-box;
    padding: 10px 30px 30px 30px;
  }

  .tip-bottom-section {
    background: #F0F3F8;
    box-shadow: 0 -1px 0 0 #E6EAEE;
    height:70px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    
  }


  .btnOk {
    background-image: linear-gradient(-180deg, #39B54A 0%, #34AA44 98%);
    border: 1px solid #249533;
    cursor:pointer;

    border-radius: 4px;
    height: 35px;
    padding: 2px 31px;
    color: #fff;
  }
  .btnNo {
    background-image: linear-gradient(0deg, #F2F4F7 0%, #FFFFFF 100%);
    border: 1px solid #CED0DA;
    border-radius: 4px;
    height: 35px;
    padding: 2px 31px;
    color: #4F5F6F;
  }
  
  .box-out {
      position: relative;
      width:60px;
      height:50px;

  }
  .layer-msg-tip,.loading-msg-tip {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,0.3);
    color: #fff;
    z-index: 1000;
    padding: 10px 30px;
    font-size: 12px;
    border-radius: 10px;
  }
avatar
文章
阅读
粉丝