Bootstrap modal dismiss if user click anywhere else..how to prevent this?

Question

I am using Twitter's Bootstrap modal.

The modal is dismissed whenever the user clicks anywhere else on the screen except the modal.

Is there a way I can prevent this, so the user has to click the Close button to dismiss the modal?

Best,

Answer 1

you can pass these options:

{
  keyboard: false,
  backdrop: 'static'
}

Answer 2

In most cases, the modal dialog is constructed not using Javascript, rather it's using the markup, in this scenario, just add attribute: data-backdrop="static" in the div that has class="modal fade".

Example:

  <div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Answer 3

In some cases, this alternative solution may be useful.

$('#modalElement').on('hide.bs.modal', function () {
    return false;
});

Answer 4

For new version of bootstrap at least 5.0 the correct way is:

 <div class="modal fade" id="carDialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="carDialogLabel" aria-hidden="true">

Take a look at backdrop and keyboard it is: data-bs-backdrop and data-bs-keyboard.