How to Prevent Bootstrap Modals from Closing on Outside Click?

Disabling Bootstrap Modal Closure on Outside Click

The default behavior of Bootstrap modals is to allow them to be closed by clicking anywhere outside of the modal content area. However, there may be instances where you want to prevent this behavior and disable the ability to close the modal by clicking outside.

Customization Options

To achieve this, you can use the following options provided by Bootstrap:

1. backdrop:

Setting the backdrop option to static will prevent the modal from closing when clicking on the background.

2. keyboard:

Setting the keyboard option to false will prevent the modal from closing when pressing the Escape (Esc) key.

Implementing the Options

For JavaScript:

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

For Data Attributes:

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

By using these options, you can selectively disable the ability to close specific modal instances by clicking outside of their content areas, while still allowing other modals to function normally.

The above is the detailed content of How to Prevent Bootstrap Modals from Closing on Outside Click?. For more information, please follow other related articles on the PHP Chinese website!