Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootbox: Callback function after dismissing the dialog / Clicking on the 'X' button

The following snippet allows me to perform stuff in a callback function for the buttons that are clicked. However, how can I get a callback function, or a similar workaround such that I can perform some code when a user clicks on the 'X' button/dismisses the dialog?

    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.}

I do not want to disable/hide the close button with

closeButton: false,
like image 800
Null Reference Avatar asked Mar 18 '15 02:03

Null Reference


People also ask

How do I close Bootbox dialog?

Pressing the ESC key or clicking close () dismisses the dialog and invokes the callback as if the user had clicked the Cancel button. Prompt dialogs require a callback function.

What is a Bootbox and how it is generated?

js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing, or removing any of the required DOM elements or JavaScript event handlers.


1 Answers

You can use a variable to check if the modal was hidden after a click on OK or 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

like image 68
anpsmn Avatar answered Oct 13 '22 00:10

anpsmn