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

Question

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,

Did you check the example on [their page](http://bootboxjs.com/)? Search for `Prompt with default value` Or you can use `$("#myModal").on("hidden", function() { //do something });` — anpsmn, Mar 18 '15 at 09:01

score 13 · Accepted Answer · answered Jun 25 '15 at 11:45

13

There is onEscape function for this.

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

answered Jun 25 '15 at 11:45

Haris ur Rehman

2,593
30
41

4

This does not trigger when clicking on the X, only when hitting the `esc` key. anpsmn's answer works for both. – Felix Böhme Apr 14 '16 at 20:02

score 7 · Answer 2 · answered Mar 18 '15 at 10:53

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

MackieeE · Answer 3 · 2018-04-10T15:29:55.240

Some people might see this as a bit of a hack-around. Although it suits me fine as all I wanted to acknowledge as a developer that someone accepted the message, which triggered the next event.

Using Bootbox.js' native confirm() method which does supply a callback action. I added an additional class as an option to the confirm button (which must be supplied on a confirm() call) with the hidden classname (E.g. Bootstap has a helper class for display:none called hidden.

This hides the confirm button, thus the Modal appears as a normal Alert box.

    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

I found this answer to be quite useful for me today, being this bit of code `"confirm": { label: "", className: "hidden" }` where for the life of me, couldn't get a "confirm" button to "not" show. I am so not a JS guy, and Googling around led me here. Just thought you might like to know that. — Funk Forty Niner, Apr 10 '18 at 15:19

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

3 Answers3