基于Bootstrap V3的Modal 進行 Dialog 二次封裝

beamDialog 是基于bootstrap V3版本中的modal進行二次封裝的結果.主要用于方便的調用modal框體.

• 個人主頁: http://about.me/beam
• Look Demo in JsFiddle:

參數設置:

$.beamDialog(options);
var defaults = {
    title:'標題',
    content:'內容',
    showCloseButton:true,
    //顯示關閉按鈕
    otherButtons:[],
    //其他按鈕文本，樣式默認,["確定","取消"]
    otherButtonStyles:[],
    //其他按鈕的樣式，['btn-primary','btn-primary'],bootstrap按鈕樣式
    bsModalOption:{},
    //默認的bootstrap模態對話框參數
    dialogShow:function(){},
    //對話框即將顯示事件
    dialogShown:function(){},
    //對話框已經顯示事件
    dialogHide:function(){},
    //對話框即將關閉
    dialogHidden:function(){},
    //對話框已經關閉事件
    clickButton:function(sender,modal,index){}
}

完整例子代碼:

$.beamDialog({
    title:'系統提示',
    content:'確認刪除本條記錄?',
    showCloseButton:true,
    otherButtons:["確定","取消"],
    otherButtonStyles:['btn-primary','btn-primary'],
    bsModalOption:{keyboard: true},
    dialogShow:function(){
        alert('即將顯示對話框');
    },
    dialogShown:function(){
        alert('顯示對話框');
    },
    dialogHide:function(){
        alert('即將關閉對話框');
    },
    dialogHidden:function(){
        alert('關閉對話框');
    },
    clickButton:function(sender,modal,index){
        alert('選中第'+index+'個按鈕：'+sender.html());
        $(this).closeDialog(modal);
    }
});

簡單調用例子代碼:

obj.event function(){
    $.beamDialog({
        title:'系統提示',
        content:'確認刪除本條記錄?'
    });
}

項目主頁：http://www.baiduhome.net/lib/view/home/1416408899242