How to Make Bootstrap Modal Background Not Clickable

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.

Bonus: download a Free Bootstrap CHEAT SHEET that will show you 20+ most important examples to learn in Bootstrap.

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.

Test it Live

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.

DOWNLOAD Free Bootstrap CHEAT SHEET