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