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

【问题标题】：Bootbox: Callback function after dismissing the dialog / Clicking on the 'X' buttonBootbox：关闭对话框后的回调函数/单击“X”按钮
【发布时间】：2015-03-18 02:36:42
【问题描述】：

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

【问题讨论】：

你查看their page上的例子了吗？搜索Prompt with default value或者你可以使用$("#myModal").on("hidden", function() { //do something });
嗯，似乎无法与自定义对话框一起使用

标签： javascript twitter-bootstrap callback bootbox

【解决方案1】：

为此有 onEscape 函数。

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

【讨论】：

这不会在点击 X 时触发，只有在点击 esc 键时才会触发。 anpsmn 的答案适用于两者。

【解决方案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");
}

Fiddle demo

【讨论】：

【解决方案3】：

有些人可能会认为这有点绕口令。虽然这很适合我，因为我只想承认作为开发人员，有人接受了消息，这触发了下一个事件。

使用Bootbox.js'本机confirm() 方法，确实提供callback 操作。我添加了一个附加类作为confirm 按钮的选项（必须在confirm() 调用中提供）与hidden 类名（例如，Bootstap 有一个display:none 的帮助器类叫hidden。

这隐藏了确认按钮，因此 Modal 显示为正常的警报框。

    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

【讨论】：

我今天发现这个答案对我非常有用，因为这段代码"confirm": { label: "", className: "hidden" } 在我的一生中，无法获得“不”显示的“确认”按钮。我不是一个 JS 人，谷歌搜索把我带到了这里。只是想你可能想知道。