Bootstrap 引导框:关闭对话框/单击“X”按钮后的回调函数

gkn4icbw  于 2023-11-15  发布在  Bootstrap
关注(0)|答案(4)|浏览(169)

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

ogq8wdun

ogq8wdun1#

这里有一个onEscape函数。

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

字符串

c9qzyr3d

c9qzyr3d2#

您可以使用一个变量来检查在单击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

ar5n3qh5

ar5n3qh53#

有些人可能会认为这是一个有点黑客周围。虽然它适合我的罚款,因为所有我想 * 承认 * 作为一个开发人员,有人接受了消息,这引发了下一个事件。
使用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

iq3niunx

iq3niunx4#

有时我想使用确认对话框来呈现两个选项,其中取消不是其中之一。所以我想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);
                }
            }
        });

相关问题