<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>

.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);

}

//定义函数用于构造，来传递参数

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();

}