自定义H5弹出框

自定义的组件代码如下：

/*
 *title 弹出框的标题
 *titleColor 弹出框标题颜色
 *message 提示语
 *messageColor 提示语颜色
 *backgroundColor 背景框颜色
 *callBack 回调方法
*/

class UIConfirmAlert {
    constructor(opts = {}) {
        this._defaultOpts = {
            zoom: 1,
            title: '提示',
            titleColor: '#fff',
            message: '提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语',
            messageColor: '#fff',
            backgroundColor:"#494b5a",
            callBack:null
        };
        //其他参数
        this._opts = $.extend(this._defaultOpts, opts);
        //绘制组件
        this._draw();
    }

    /**
     * 绘制组件
     */
    _draw() {
        let testStr = `

                            

                                
${this._opts.title}
                                

                                

                                    
${this._opts.message}
                                
                                

                                

                                    确认
                                    

                                    取消
                                
                            
                    
`;

        var body = document.getElementsByTagName("body");
        $(body).append(testStr);
        this._bindEvent();
    }

    _bindEvent() {
        var self = this;
        $(".dialog-btn-sure").click(function () {
            self.cleanup()
        });
        $('.dialog-btn-cancel').click(function () {
            $(".alert_mark").remove()
        });
    }

    cleanup() {
        if (this._opts.callBack){
            this._opts.callBack();
        }
        $(".alert_mark").remove()
    }

}

下面是组件的初始化，此自定义的组件是直接添加在body上面的，直接初始化就可以使用

效果如下图所示

1588063840058.jpg