自定义确定框（confirm）

1、先引入 confirm.css

@charset "UTF-8";

lq-alert {
    width:  100%;
    height: 100%;
    background: rgba(0, 0, 0, .35);
    position: fixed;
    top:  0;
    left: 0;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
}

alert-wrap {
    width:  300px;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    font: 300 20px "微软雅黑" !important;
}

alert-content {
    padding: 25px 40px;
    font-weight: lighter;
    font-size: 16px !important;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}
alert-btnbox  {
    height: 60px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}

alert-btn {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    width: calc(50% - .5px);
    height: 100%;
    cursor: pointer;
    color: #fff;
    letter-spacing: 2px;
}
#lq-alert-canc-btn{
    color: #D3D3D3;
    border-top:1px solid #D3D3D3;
    border-right:1px solid #D3D3D3;
}
#lq-alert-sure-btn{
    color: #FF0000;
    border-top:1px solid #D3D3D3;
    border-right:1px solid #D3D3D3;
}
#alert-btn:active {
    background: rgb(35, 106, 118);
    border-top:1px solid #696969;
    
}

.alert-sure-btn {
    width: 100%;
}

.lq-alert-text-ipt {
    box-sizing: border-box;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    outline: none;
    width: 100%;
    height: 35px;
    padding-left: 8px;
    color: #696969;
    font: 300 14px "微软雅黑";
}

alert-title {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    margin-top: 30px;
    background: url(../images/smile.png) no-repeat center center;
    background-size: cover;
    width: 70px;
    height: 70px;
}

2、引入confirm.js

;(function (window) {
    let lqAlertView = function (options) {
        // 定义属性
        this.sureBtn    = null;
        this.cancelBtn  = null;
        this.textInput  = null;
        // 设置默认属性
        this.configs = {
            "type": "default",
            "title": "",
            "message": "",
            "autoClose": 0,
            "placeholder": "",
            "cancelTitle": "离开",
            "sureTitle": "再做一张",
            "cancelCallBack": "",
            "sureCallBack": ""
        };
        // 扩展默认属性
        options && this.extend(this.configs, options);
        // 初始化方法
        this.init();
        // 事件添加
        this.sureBtn   && this.addEvent(this.sureBtn,   "click", this.btnClick.bind(this));
        this.cancelBtn && this.addEvent(this.cancelBtn, "click", this.btnClick.bind(this));
        document.body.style.cssText = "overflow: hidden;";
        // 判断是否自动关闭
        this.configs.autoClose && setTimeout(this.close, this.configs.autoClose);
    };
    
    lqAlertView.prototype = {
        init: function () {
            var config = this.configs,
                alertHtmls = "";
            switch (config.type) {
               
                case "confirm": {
                    alertHtmls =
                        "<lq-alert>"     +
                        "<alert-wrap>"    +
                        "<alert-title></alert-title>"   +
                        "<alert-content>" + config.message    + "</alert-content>" +
                        "<alert-btnbox>"  +
                        "<alert-btn id='lq-alert-canc-btn'>" + config.cancelTitle + "</alert-btn>" +
                        "<alert-btn id='lq-alert-sure-btn'>" + config.sureTitle   + "</alert-btn>" +
                        "</alert-btnbox>" +
                        "</alert-wrap>"   +
                        "</lq-alert>";
                } break;               
            }
            document.body.insertAdjacentHTML("beforeend", alertHtmls);
            this.sureBtn   = document.getElementById("lq-alert-sure-btn");
            this.cancelBtn = document.getElementById("lq-alert-canc-btn");
            this.textInput = document.getElementById("lq-alert-text-ipt");
        },
        extend: function (oldObj, newObj) {
            for(var key in newObj) {
                oldObj[key] = newObj[key];
            }
            return oldObj;
        },
        addEvent: function(el, type, callBack) {
            if (el.attachEvent) {
                el.attachEvent('on' + type, callBack);
            } else {
                el.addEventListener(type, callBack, false);
            }
        },
        btnClick: function (e) {
            e = e || event;
            var _this    = this,
                _tarId   = e.target.id,
                _configs = this.configs;
            switch(_tarId) {
                // 点击取消按钮
                case "lq-alert-canc-btn":{
                    _configs.cancelCallBack && _configs.cancelCallBack();
                    _this.close();
//                  window.location.href
                } break;
                // 点击确认按钮
                case "lq-alert-sure-btn": {
                    var text = _configs.type == "prompt" ? _this.textInput.value : "" ;
                    _configs.sureCallBack && _configs.sureCallBack(text);
                    _this.close();
                }break;
            }
            
        },
        close: function () {
            var alert = document.getElementsByTagName("lq-alert")[0];
            document.body.removeChild(alert);
            document.body.style.cssText = "overflow: auto;";
            
        }
    };

    window.lqAlertView = lqAlertView;
})(window);

3、实例化使用

 new lqAlertView({
       type: "confirm",
       title: "",
       message: "您还可以再寄出"+(2 - parseInt(data.data.num))+"张哦",//邀请函正在加紧制作中,
        sureCallBack: function (e) {
        var url = encodeURI("editPostcard.html");
              window.location.href = url;
         },
         cancelCallBack: function (e) {
               wx.closeWindow();
         }
})