Bootbox：关闭对话框/单击“X”按钮后的回调函数

Question

以下代码片段允许我在回调函数中为单击的按钮执行操作。但是，如何获得回调函数或类似的解决方法，以便在用户单击“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,

Answer 1

为此有 onEscape 函数。

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

Answer 2

您可以使用变量来检查单击

OK

或

x 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");
}

小提琴演示

Answer 3

有些人可能会认为这是一种黑客攻击。尽管这很适合我，因为作为开发人员，我想承认有人接受了该消息，从而触发了下一个事件。

使用

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 示例

Answer 4

有时我想使用“确认”对话框来显示 2 个选项，其中“取消”不是其中之一。所以我想要 escape 或 X 按钮来关闭对话框。为此，我添加了一个名为“dismissOnClose”的选项。然后我修改了bootbox.js

        dialog.on("click", ".bootbox-close-button", function (e) {
            // onEscape might be falsy but that's fine; the fact is
            // if the user has managed to click the close button we
            // have to close the dialog, callback or not
            // MG added option to dismiss dialog on close or esc without returning true or false
            if (typeof options.dismissOnClose === "undefined" || !options.dismissOnClose) {
                processCallback(e, dialog, callbacks.onEscape);
            } else {
                processCallback(e, dialog, null);
            }
        });

和

        dialog.on("escape.close.bb", function (e) {
            // the if statement looks redundant but it isn't; without it
            // if we *didn't* have an onEscape handler then processCallback
            // would automatically dismiss the dialog
            if (callbacks.onEscape) {
                // MG added option to dismiss dialog on close or esc without returning true or false
                if (typeof options.dismissOnClose === "undefined" || !options.dismissOnClose) {
                    processCallback(e, dialog, callbacks.onEscape);
                } else {
                    processCallback(e, dialog, null);
                }
            }
        });