CODEWITHSUNDEEP
javascripttwitter-bootstrap-3modal-dialogbootbox
Kokizzu
Kokizzu

Reputation: 26888

How to make bootbox closing when using custom dialog

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');

Upvotes: 23

Views: 51066

Answers (6)

apc
apc

Reputation: 5566

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");

Upvotes: 2

mwag
mwag

Reputation: 4045

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);

Upvotes: 1

AndyS
AndyS

Reputation: 816

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>

Upvotes: 1

bart
bart

Reputation: 7777

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

See docs and example.

Basic code:

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

Upvotes: 20

tibc-dev
tibc-dev

Reputation: 983

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()
});

Upvotes: 40

Miomir Dancevic
Miomir Dancevic

Reputation: 6852

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
});

Upvotes: 2

Related Questions