John Mwaniki /    Updated on 23 Dec 2023

How to Disable Closing Bootstrap Modal on Clicking Outside

A Bootstrap modal is a dialog box that appears on top of the webpage and temporarily takes control of user interaction.

It can be used to display user notifications, forms, images, or any other relevant custom content.

The dark semi-transparent overlay behind the modal which dims the rest of the page and visually highlights the active modal is referred to as the backdrop.

By default, clicking on the backdrop area triggers the closure of the modal.

Launch demo modal

This may however lead to accidental closure of the modal when the user is not yet done interacting with it.

For this and other reasons, you may want to disable this default behavior of closing the modal by clicking outside of it (on the backdrop).

In this article, we will explore different methods to disable the closing of Bootstrap modals when clicking outside or pressing the ESC key.

Disabling Closing the Modal by Clicking Outside

There are two methods:

1. Using the "data-backdrop" attribute

The easiest way to disable the closing behavior of the modal upon clicking outside of it is by adding a data-backdrop attribute to the modal div element and setting its value as "static".

<div id="myModal" class="modal" data-backdrop="static">
  >!-- Modal content -->
</div>

Alternatively, you can add the data-backdrop attribute with the same value to the button/element that triggers the opening of the modal instead of the modal itself.

<button data-toggle="modal" data-target="#myModal" data-backdrop="static">
    Launch demo modal
</button>

The above two ways work well for Bootstrap v4 and Bootstrap v3. For Bootstrap v5, the data-backdrop attribute was replaced with the data-bs-backdrop attribute.

Therefore, if you are on Bootstrap v5 make sure to use data-bs-backdrop in the place of data-backdrop in the modal div element or on the element that triggers the opening of the modal. Everything else is the same.

Launch demo modal

2. Using jQuery

Another method to disable the backdrop's closing functionality is by using jQuery. Use the "backdrop" property in the modal() method and set its value as "static" to specify the behavior.

$("#myModal").modal({
  backdrop: 'static'
});

In this case, the modal with the ID "myModal" will not close when the user clicks outside.

Disabling Closing the Modal by Pressing ESC

Besides clicking on the close button and the backdrop area, pressing the ESC keyboard key is another way of closing the Bootstrap modal by default.

If for any reason you want to disable the closing of the modal by using the ESC key, then below is how to do it.

1. Using the "data-keyboard" attribute

The easiest way to disable closing the modal by use of the ESC keyboard key is by adding the data-keyboard attribute to the modal div element or on the trigger button and setting its value as "false".

<!-- On the modal div -->
<div id="myModal" class="modal" data-keyboard="false">
  <!-- Modal content -->
</div>

<!-- On the trigger button -->
<button data-toggle="modal" data-target="#myModal" data-keyboard="false">
    Launch demo modal
</button>

For Bootstrap version 5, use the "data-bs-keyboard" instead with the same value (false).

2. Using jQuery

To disable the closing of the modal by pressing the ESC key using jQuery, use the keyboard property with the value "false" in the modal() method.

$("#myModal").modal({
  keyboard: false
});

You can disable closing the modal both by clicking on the backdrop area and pressing on the ESC key at the same time.

This is by adding the two attributes:

<!-- On the modal div -->
<div id="myModal" class="modal" data-backdrop="static" data-keyboard="false">
  <!-- Modal content -->
</div>

<!-- On the trigger button -->
<button data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
</button>

Or by specifying the two properties in the modal() method:

$("#myModal").modal({
  backdrop: 'static',
  keyboard: false
});

Conclusion

Bootstrap modals provide a convenient way to display content and interact with users.

However, in certain scenarios, you may need to disable the default behavior of closing the modal when the user clicks outside the modal area or presses the ESC key.

This article has explained everything you need to know in achieving that.