How to make bootbox closing when using custom dialog

Question

I'm using bootbox to show dialog.

If I use bootbox.confirm, bootbox.alert or bootbox.prompt, when pressing escape key or clicking outside the dialog, the dialog closed as expected

but when using bootbox.dialog, when I click outside the dialog or pressing escape key, the dialog doesn't close, how to make it behave as other dialog do?

var box = bootbox.dialog({
    show: false,
    backdrop: true,
    animate: false,
    title: 'Bla',
    message: 'bla bla bla',
    buttons: {
        cancel: {
            label: 'Cancel',
            className: 'btn-warning'
        },
        save: {
            label: 'Parse',
            className: 'btn-success',
            callback: function () {
                // handling with ajax
                return false;
            }
        }
    }
});
box.modal('show');

you can use the onEscape: function(){//callback } to do the trick with the options, you have given, give this as well and just say return in that onEscape: function(){return;} done http://bootboxjs.com/documentation.html — Ankur Verma, Feb 25 '15 at 16:40

score 39 · Accepted Answer · edited Jan 27 '15 at 15:48

39

This should do it. Please note this has only been tested on v3. using bootstrap 2.3.2

$(document).on('click', '.modal-backdrop', function (event) {
    bootbox.hideAll()
});

edited Jan 27 '15 at 15:48

Kokizzu

24,974
37
137
233

answered Jan 20 '15 at 03:48

tibc-dev

973
11
16

score 19 · Answer 2 · answered Mar 31 '15 at 11:21

19

Add an onEscape callback function, which may have an empty body.

See docs and example.

Basic code:

bootbox.dialog({
   onEscape: function() {},
   // ...
});

answered Mar 31 '15 at 11:21

bart

7,640
3
33
40

Works with the latest 4.x.x version – croppio.com Sep 06 '16 at 07:16
5

`onEscape: true` would suffice. – fabpico Oct 24 '17 at 06:29
This is the correct answer to the question. – ManoDestra Jun 06 '22 at 14:24

Miomir Dancevic · Answer 3 · 2014-11-06T10:41:14.220

To be honest I've never really used modal - it came from a PR a long, long time ago but I've never been convinced of its use case. No good to you now but the method is actually commented as being deprecated in v3.0.0 and will probably actually be removed in future versions - it just doesn't really fit (to me) what Bootbox was created for and as other methods have been tweaked, improved and tested it's sat there somewhat neglected.

But you can do something like this

$(document).keyup(function(e) {
  if (e.keyCode == 27) {box.modal("hide");}   // esc
});

score 2 · Answer 4 · answered Sep 25 '20 at 11:28

2

For those looking to close a single bootbox modal when you have multiple modals open I have found the following to work without breaking the others:

dialog.find(".bootbox-close-button").trigger("click");

answered Sep 25 '20 at 11:28

apc

5,306
1
17
26

score 1 · Answer 5 · answered Feb 13 '18 at 14:38

In version 3, with dialog, backdrop being true only works when onEscape is true as well - so you just need to set both to true, e.g.

bootbox.dialog({message:'Message', title:'Title', backdrop:true, onEscape:true})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

mwag · Answer 6 · 2018-10-22T12:51:53.737

I tried other answers here and they didn't work for me. I'm not sure if it had to do with the specific version of bootbox I was using or some other reason, but I just rolled my own solution to:

only close the last modal that was opened (i.e. for nested modals, don't close all of them)
selectively choose which modals will close on outside click and which will not
work on all of the modal flavors (dialog, alert, confirm etc)
not require me to change libraries or library versions

by doing the following:

function hideDialogOnOutsideClick(d) { // d = bootbox.dialog(...)
  d[0].addEventListener('click', function(e) {
    if(e.target == d[0])
      $(d).modal('hide');
    e.stopImmediatePropagation();
    return false;
  });
}

which is used like so:

var d = bootbox.dialog(...) // or alert, confirm etc
hideDialogOnOutsideClick(d);

How to make bootbox closing when using custom dialog

6 Answers6