自定義彈窗（dialog）

簡易彈窗

開發說明

1. 項目使用原型對象的方式實現彈窗的基本功能
2. 項目依賴jquery，若是使用zepto，可能須要改動代碼，未測試，有問題請反饋，及時解決
3. 項目提供了可定製彈窗，能夠自定義按鈕，標題，以及對應按鈕的回調函數
4. 樣式徹底能夠按照本身的需求自定義，很靈活。

css樣式

/*dialog*/
body.locked{overflow-y:hidden;}
.dialog-box{ width:100%;height:100%;max-width:720px;position: fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.3);z-index:1000;display:none;}
.dialog-box .dialog-content{width:460px;padding:30px 10px;height:auto;border-radius:10px;
    background: #ffffff;min-height:100px;position:absolute;top:50%;left:50%;
    transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);z-index:1001;}
.dialog-box .dialog-title,.dialog-box .dialog-btn{color:#666666;font-size: 30px;text-align:center;}
.dialog-box .dialog-title{padding:0 12px;}
.dialog-box .dialog-btns{text-align:center;}
.dialog-box .dialog-btn{display:inline-block;width:130px;margin:28px 44px 0;border-radius: 4px;height:56px;line-height: 56px;}
.dialog-box .dialog-cancel-btn{background: #dddddd;}
.dialog-box .dialog-confirm-btn{background: #9cbf42;color:#ffffff;}
.store-switch-tip{color:#9cbf42;font-size: 30px;padding:0 6px;}
基本樣式設置，能夠根據本身的需求自定義樣式

彈窗構造函數

Dialog = function( options ){
    var defaultOptions = {
        container : 'dialog-box',
        btns : [ 
            { klass : 'dialog-cancel-btn', txt:'取消'},
            { klass : 'dialog-confirm-btn', txt : '確認'}
        ]
    };
    // 合併自定義參數
    this.options = $.extend({}, defaultOptions, options || {});
};
1. options : 參數對象，若是不傳則系統默認，參數類型必須是對象，與定義的defaultOptions格式一致
2. $.extend() ：合併參數，不知道其用法的，請查閱相關資料。

構造函數的原型方法

Dialog.prototype = {
    $body : $('body'),
    constructor : Dialog,
    show : function( title ){
        var 
        _self = this,
        args = Array.prototype.slice.apply(arguments),
        options = _self.options;
        args.shift();
        _self.$body.addClass('locked');
        setTimeout(function(){
            $('.' + options.container ).show().find('.dialog-title').html( title );
            $.each(options.btns,function( k, v ){
                $('.' + v.klass ).data( 'fn',args[k] || function(){} );
            });
        },30);
    },
    init : function(opt){
        var _self = this,
        options = $.extend({}, _self.options, opt || {}) , // 合併自定義參數
        btnsHTML = '',
        node = $('.' + options.container ).remove(); // 移除已存在的彈窗
        node = null;
        $.each( options.btns, function( k, v ){
            btnsHTML += '<span class="' + v.klass + ' dialog-btn" >' + v.txt + '</span>'; 
        });
        $('<section class="' + options.container + '">' +
            '<div class="dialog-content">' +
                '<div class="dialog-title"></div>' + 
                '<div class="dialog-btns">' + btnsHTML + '</div>' + 
            '</div>' +
            '</section>').appendTo('body');
        _self._event();
        return _self;
    },
    _event : function(){
        var _self = this;
        var options = _self.options;
        $('.' + options.container ).on('click', '.dialog-btn', function(e){
            e.stopPropagation();
            _self.$body.removeClass('locked');
            $('.' + options.container ).hide();
            $(this).data('fn')();
        });
    }
};
1.原型中提供了init和show方法。
    init方法能夠接受參數，也是一個參數對象，與在構造函數中的方法同樣，主要是爲了方便更改彈窗功能。
    show方法主要是作顯示處理，須要傳標題，和相應按鈕的回調函數，並將回調函數綁定在相應的按鈕上，以待按鈕觸發事件時回調。
2.按鈕回調函數的綁定是經過jquery中的 data 方法實現的，能夠查閱相關的資料

組件的使用

// 實例化彈窗對象
var dialog = new Dialog();

// var dialog = new Dialog({
     // 能夠配置相應的參數，也能夠不配置使用默認，默認是一個確認一個取消，注意參數格式，請參照默認參數配置
// }); 
dialog.init(); // 初始化彈窗
dialog.show('我是標題',function(){
    alert('按鈕1觸發後的回調！')
},function(){
    console.log('按鈕2的回調函數！');
}[,...]);// 注意回調函數要和按鈕一一對應。

固然你也能夠連着寫 如：dialog.init().show();
若是須要的話，你也能夠在彈窗初始話的時候傳參，修改默認配置參數。在實例化後，是雙按鈕，而後有須要一個但按鈕。
這時你無需在建立一個彈窗實例，直接調用實例的init方法，配置相應的參數便可。你能夠這樣使用：
dialog.init({
    btns : [ 
            { klass : 'dialog-confirm-btn', txt : '知道了'}
        ]
}).show('我只有一個按鈕哈',function(){alert('點擊個人回調哈')});

如在使用過程當中遇到任何問題，或者有更好的方案歡迎留言，謝謝！