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

      }
    });