bootbox簡單使用

bootbox

　　下載地址：http://bootboxjs.com/

　   更多實例：http://bootboxjs.com/examples.html#bb-alert-dialog

alert

bootbox.alert({
    message: "This is the small alert!",
    size: 'small'
});

 

confirm

$("#amend_form").submit(function (event) {
    var currentForm = this;
    event.preventDefault();
    bootbox.confirm({
        size: "small",
        message: "確認修改嗎?",
        buttons: {
            confirm: {
                label: '確定',
                className: 'btn-success'
            },
            cancel: {
                label: '取消',
                className: 'btn-danger'
            }
        },
        callback: function (result) { /* result is a boolean; true = OK, false = Cancel*/
            if (result) {
                currentForm.submit();
            } else {
            }
        }
    });
});

 

dialog

如果要自定義bootbox的樣式和位置，可以利用bootbox.dialog中的className

下面是一個二次確認實例

$("#amend_form").submit(function (event) {
    var currentForm = this;
    event.preventDefault();

    bootbox.dialog({
        // dialog的內容
        message: "確認修改嗎?",
        // dialog的標題
        title: "提示",
        // 退出dialog時的回調函數，包括用戶使用ESC鍵及點擊關閉
        onEscape: function() {},
        // 是否顯示此dialog，默認true
        show: true,
        // 是否顯示body的遮罩，默認true
        backdrop: true,
        // 是否顯示關閉按鈕，默認true
        closeButton: true,
        // 是否動畫彈出dialog，IE10以下版本不支持
        animate: true,
        // dialog的類名
        className: "my_modal_position",
        
        // dialog底端按鈕配置
        buttons: {
            // 其中一個按鈕配置
            success: {
              label: "確定",
              className: "btn-success",
              // 點擊按鈕時的回調函數
              callback: function() {
                 currentForm.submit();
            }
        },
            // 另一個按鈕配置
            Danger: {
                label: "取消",
                className: "btn-danger",
                callback: function() {}
        }

      }
    });