In this tutorial, learn how to set Bootstrap modal background not clickable. The modal is the simple popup created using Bootstrap. You have used Bootstrap modal and its classes to make the outer area of modal not clickable.
But, what is the method to make the modal background not clickable? Should I require to use any jquery or scripting codes to perform this task?
Well! You don't need any jQuery or scripting code to do this. Bootstrap comes with a simple class addition method and data-target attributes. 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.Download the Bootstrap Modal Using Below Button
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
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.
<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">
<button type="button" class="close" data-dismiss="modal">×</button>
Are you sure you want to continue?
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
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.
Hope, you like this post of how to make Bootstrap modal background not clickable. If you have any query regarding the tutorial, please comment below.