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,

- Null Reference

---

你有在它们的页面上查看过示例吗？搜索Prompt with default value ，或者你可以使用$("#myModal").on("hidden", function() { //do something });。 - anpsmn

嗯，似乎无法与自定义对话框一起使用。 - Null Reference

Answer 1

有一个名为onEscape的函数可用于此。

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

- Haris ur Rehman

---

只有按下 esc 键才会触发，点击 X 不会触发。anpsmn 的回答适用于两种情况。 - Felix Böhme

Answer 2

你可以使用一个变量来检查模态框是否在点击“OK”或“x按钮/Escape键”后被隐藏。

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

- anpsmn

Answer 3

有些人可能认为这是一种折中的方法。虽然对我来说很适合，因为我只想作为开发者“确认”某个人接受了消息，这触发了下一个事件。

使用Bootbox.js的原生confirm()方法，它确实提供了一个callback操作。我添加了一个附加类作为confirm按钮的选项（必须在confirm()调用上提供），带有hidden类名（例如，Bootstrap有一个辅助类用于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示例

- MackieeE

---

我今天发现这个答案对我非常有用，它是这段代码"confirm": { label: "", className: "hidden" }，在我的生命中，我无法让“确认”按钮“不要”显示。我不是JS专家，通过Google找到了这里。只是想让你知道。 - Funk Forty Niner

Answer 4

有时候我想使用确认对话框来呈现两个选项，其中取消不是其中之一。所以我希望按下“Esc”键或者“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);
                }
            }
        });

- nuander