Bootbox:解除对话后的回拨功能/点击' X'按键

时间:2015-03-18 02:36:43

标签: javascript twitter-bootstrap callback bootbox

以下代码段允许我在单击的按钮的回调函数中执行操作。但是,如何获得回调函数或类似的解决方法,以便在用户点击“X'”时可以执行某些代码。按钮/取消对话框?

    bootbox.dialog({
        title: "Woah this acts like an alert",
        message: "Cool info for you. You MUST click Ok.",
        buttons: {
            sucess:{
                label: "Ok",
                callback: callback
            }
        }       
    });

   callback(){//stuff that happens when they click Ok.}

我不想用

禁用/隐藏关闭按钮
closeButton: false,

3 个答案:

答案 0 :(得分:11)

这有onEscape功能。

bootbox.dialog({
    message: 'the msg',
    title: "Title",
    onEscape: function() {
        // you can do anything here you want when the user dismisses dialog
    }
}); 

答案 1 :(得分:6)

您可以使用变量检查点击OKx button / escape key

后是否隐藏了模态
var status = false;

$('.btn').on('click', function () {
    bootbox.dialog({
        title: "Woah this acts like an alert",
        message: "Cool info for you. You MUST click Ok.",
        buttons: {
            sucess: {
                label: "Ok",
                callback: function () {
                    status = true;
                }
            }
        },
        onEscape: function () {
            $('.bootbox.modal').modal('hide');
        }
    });
});

$(document).on("hidden.bs.modal", ".bootbox.modal", function (e) {
    callback();
});


function callback() {
    if (!status) {
        onClose();
    } else {
        onOK();
        status = false;
    }
}

function onClose() {
    $('p.alert span').removeClass().addClass('text-danger').text("Dismissed");
}

function onOK() {
    $('p.alert span').removeClass().addClass('text-success').text("Sucess");
}

Fiddle demo

答案 2 :(得分:1)

有些人可能会认为这有点像黑客攻击。虽然它很适合我,因为我想要 承认 作为开发人员接受了该消息,这触发了下一个事件。

使用 提供Bootbox.js操作的confirm()'原生callback方法。我添加了一个额外的类作为confirm按钮的选项(必须confirm()调用时提供)hidden类名称(例如,Bootstap有一个display:none的助手类名为 hidden

这会隐藏确认按钮,因此模态显示为正常警报框。

    bootbox.confirm({ 
        message: "Some Button Text", 
        buttons: {
            "cancel": {
                label: "<i class='fa fa-check'></i> OK - I understand",
                className: "btn btn-primary"
            },
            //Hide the required confirm button.
            "confirm": { label: "", className: "hidden" }
        },
        callback: function(){
            //Begin Callback
            alert( "Finished" );
        }
    });

JsFiddle Example