How to Make Bootstrap Modal Background Not Clickable

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 You can use the above given Bootstrap modal to learn the below-given example.

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.

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.

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.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Download Link Will be Send to Your Email id