Last Updated on December 31, 2024 by Roshan Parihar
In this tutorial, learn how to set modal background not clickable in Bootstrap 5. The short answer is: use the data-bs-backdrop and data-bs-keyboard attributes to the button that displays the modal popup on click.
How to Make Modal Background Not Clickable in Bootstrap 5
To make modal background not clickable in Bootstrap 5, you have to add the attribute with value data-bs-backdrop="static" and data-bs-keyboard="false" to the modal as given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop"> Open static backdrop modal </button> <!-- Modal --> <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title fs-5" id="staticBackdropLabel">Notification</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> |
Output
When you click the above button, you will get the modal that you cannot click outside to close it. It’s because of the static backdrop attributes added to the modal div.
Make Modal Background Not Clickable in Bootstrap 4
If you want to make modal background not clickable in Bootstrap 4, you have to add to attribute data-backdrop with value static. Also, add the attribute data-keyboard with value false as showing below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop"> Open static backdrop modal </button> <!-- Modal --> <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="staticBackdropLabel">Notification</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> |
Output
When you click the above button, you will get a modal popup in which you cannot click the background to close it. This is because of the added attribute to the modal div element.
Do Not Allow Outside Click in Bootstrap 3
You have to first create a modal using Bootstrap. If you have no idea about creating a modal popup with Bootstrap, you can follow our post on Bootstrap modal.
Use the below example to add a simple Bootstrap button. The button takes attribute data-target, data-toggle, backdrop and data-keyboard.
Add the id of the modal in the data-target attribute as given in the example below. Use the other attribute input values as given in the example below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<button type="button" class="btn btn-primary" data-target="#MymodalBack" data-toggle="modal" data-backdrop="static" data-keyboard="false">Open Modal</button> <!-- .modal --> <div class="modal fade" id="MymodalBack"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Notification</h4> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
Output
The above example showing the button that opens the modal on click. You have to just click the above button to open the modal. If you got your modal open, click on the background or outer area of the modal. When you click the background or outer area, the modal remains open in the browser.
It only close when you click the inner close button or cross(x) sign given inside the modal. This can be helpful for bloggers to create a modal and get more user engagement through modal.