Javascript封装弹出框控件

1、首先先定义好弹出框的HTML结构

<div class="g-dialog-contianer">
        <div class="dialog-window">
            <div class="dialog-header waiting"></div>
            <div class="dialog-container">你是否要清空购物车？</div>
            <div class="dialog-footer">
                <button class="green">按钮1</button>
                <button class="red">按钮2</button>
            </div>
        </div>
</div>

2、编写好结构之后，编写CSS样式

.g-dialog-contianer{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
}
.g-dialog-contianer .dialog-window{
    padding: 1em;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.8);
}
.g-dialog-contianer .dialog-window .dialog-header{
    width: 50px;
    height: 50px;
    margin: 0 auto;
}
.g-dialog-contianer .dialog-window .dialog-header.waiting{
    background: url("wait.png")no-repeat 0 0;
    background-size: 50px;
}
.g-dialog-contianer .dialog-window .dialog-header.warning{
    background: url("warning.png")no-repeat 0 0;
    background-size: 50px;
}
.g-dialog-contianer .dialog-window .dialog-header.success{
    background: url("success.png")no-repeat 0 0;
    background-size: 50px;
}
.g-dialog-contianer .dialog-window .dialog-container{
    padding: 1em 1em 0;
    color: #fff;
    line-height: 180%;
    text-align: center;
}
.g-dialog-contianer .dialog-window .dialog-footer{
    padding: 1em 1em 0;
    display: -webkit-flex;
    -webkit-justify-content:center;
    -webkit-align-items:center;
}
.g-dialog-contianer .dialog-window .dialog-footer button{
    -webkit-appearance:normal;
    background-color: rgba(255,255,255,0.8);
    padding: 0.8em 1.8em;
    border: none;
    color: #eee;
    border-radius: 5px;
    margin: 0 1.3em;
    text-shadow: #666 1px 1px 0;
}
.g-dialog-contianer .dialog-window .dialog-footer button.green{
    background-color: rgba(2,202,200,0.8);
}
.g-dialog-contianer .dialog-window .dialog-footer button.red{
    background-color: rgba(251,23,50,0.8);
}

4、编写js代码

//定义函数用于构造，来传递参数
var Dialog = function(config) {
    //默认配置参数
    this.config = {
        //对话框宽高
        width: "auto",
        height: "auto",
        //对话框提示信息
        message: null,
        //对话框类型
        type: "waiting",
        //按钮配置
        buttons: null,
        //对话框保持时间3秒
        delay: null,
        //对话框遮罩层透明度
        maskOpcity: 0.8
    };
    //如果用户输入参数，将参数扩展
    if (config && $.isPlainObject(config)) {
        $.extend(this.config, config);
    }
    //给函数定义变量，并和config对象一起传入原型
    this.body = $("body");
    this.mask = $("<div class='g-dialog-contianer'>");
    this.win = $('<div class="dialog-window">');
    this.winHeader = $('<div class="dialog-header"></div>');
    this.winContent = $('<div class="dialog-container">');
    this.winFooter = $('<div class="dialog-footer">');
};

//原型中定义函数
Dialog.prototype = {
    creat: function() {
        //1.this指的就是该原型对象
        //2.(this.)表示原型对象调用函数中的变量
        var _this_ = this,
            config = this.config,
            body = this.body,
            mask = this.mask,
            win = this.win,
            winHeader = this.winHeader,
            winContent = this.winContent,
            winFooter = this.winFooter;
        //如果用户没输入参数,默认弹出等待框,否则用扩展值
        win.append(winHeader.addClass(config.type));
        //如果用户输入massage，显示到弹框中
        if (config.message) {
            win.append(winContent.html(config.message));
        }
        //如果用户输入按钮组
        if (config.buttons) {
            this.creatButton(winFooter, config.buttons);
            win.append(winFooter);
        }
        //如果用户自定义弹出框的宽高
        if (config.width != 'auto') {
            win.width(config.width);
        }
        if (config.height != 'auto') {
            win.height(config.height);
        }
        //默认透明度为0.8
        var opct = config.maskOpcity;
        mask.css("backgroundColor", "rgba(0,0,0," + opct + ")");
        //如果用户输入弹框保持时间
        if (config.delay && config.delay !== 0) {
            window.setTimeout(function() {
                //调用原型中的close()方法
                _this_.close();
            }, config.delay);
        }
        //渲染html
        mask.append(win);
        body.append(mask);
    },

    //关闭弹出框
    close: function() {
        this.mask.remove();
    },

    //创建按钮组
    creatButton: function(footer, buttons) {
        var _this_ = this;
        //遍历出数组
        $(buttons).each(function(index, element) {
            var type = element.type ? " class=" + element.type : "";
            var text = element.text ? element.text : "button" + index;
            var callback = element.callback ? element.callback : null;

            var singleButton = $("<button" + type + ">" + text + "</button>");
            //如果有回调函数，按钮绑定回调函数
            if (callback) {
                singleButton.on('click', function() {
                    callback();
                    _this_.close();
                });
            }
            //否则默认为关闭弹出框
            else {
                singleButton.on('click', function() {
                    _this_.close();
                });
            }
            footer.append(singleButton);
        });
    }
};

function startDialog1() {
    var dialog = new Dialog();
    dialog.creat();
}

function startDialog2() {
    var dialog = new Dialog({
        width: "auto",
        height: "auto",
        type: "warning",
        delay: 2000,
    });
    dialog.creat();
}

function startDialog3() {
    var dialog = new Dialog({
        width: "auto",
        height: "auto",
        type: "success",
        buttons: [{
            type: "green",
            text: "确定",
        }, {
            type: "red",
            text: "取消"
        }]
    });
    dialog.creat();
}

function startDialog4() {
    var dialog = new Dialog({
        width: "auto",
        height: "auto",
        type: "warning",
        buttons: [{
            type: "green",
            text: "确定",
            callback: function() {

            }
        }]
    });
    dialog.creat();
}

function startDialog5() {
    var dialog = new Dialog({
        width: "auto",
        height: "auto",
        buttons: [{
            type: "green",
            text: "确定",
            callback: function() {

            }
        }, {
            type: "green",
            text: "确定",
            callback: function() {

            }
        }, {
            type: "green",
            text: "确定",
            callback: function() {

            }
        }]
    });
    dialog.creat();
}

function startDialog6() {
    var dialog = new Dialog({
        width: "auto",
        height: "auto",
        message: "你是否要清空购物车？",
        type: "warning",
        buttons: [{
            type: "green",
            text: "确定",
            callback: function() {
                window.open('http://baidu.com');
            }
        }, {
            type: "red",
            text: "取消"
        }],
        maskOpcity: 0.6
    });
    dialog.creat();
}