Last Updated on July 16, 2021 by Roshan Parihar
In this tutorial, learn how to set Bootstrap modal background not clickable. The short answer is: use the data-backdrop and data-keyboard attributes to the button that displays the modal popup on click.
But, what are that values of these attributes to make the modal background not clickable? Should I also require to use any jquery or scripting codes to perform this task?
Well! it does not require any jQuery or scripting code to do this. You need to just add simple attributes given above and the values that you can find in the examples given below. By adding these, you will be able to disable the outside click of the modal to close it.
The default behavior of Bootstrap modal is that the modal close or disappear on clicking outside or inside. The background click means not to click inside the popup to close it.
How to Make Modal Background Not Clickable
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.