Prevent Closing Bootstrap Modal When Clicking Outside

In this tutorial, learn how to prevent closing the bootstrap modal when clicking outside using jQuery or HTML. Disable clicking outside or disallow keyboard ESC button to close the bootstrap modal.

Stop closing modal on mouse click outside of Bootstrap modal. Its useful when you want your visitors to click only inside the modal. Get more visitors click or more conversion by using these methods.

You have to use backdrop option and keyboard option. The first option disables closing modal on outside click. The second option prevents closing the bootstrap modal on pressing keyboard 'ESC' button.

Let's do this by using only HTML method or by using jQuery.

How to Prevent Closing Bootstrap Modal Using jQuery

To prevent closing bootstrap modal when click outside using jQuery. You have to use option backdrop to static option and keyboard to false option. This works after you click on the button and open modal.

Test it Live

Output

The above example contains the button to open modal. Click the above button to open bootstrap modal. Now, click outside of the modal after opening it. The above jQuery method prevents closing the Bootstrap modal when someone clicks outside.

This is the method need some jQuery to add to perform this task. However, if you want to perform this task by using only HTML then read further.

Prevent or Disable Closing Bootstrap Modal Using HTML

To stop closing the bootstrap modal when click outside using only HTML. You have to add the attributes data-backdrop and data-keyboard to the open button.

Test it Live

Output

The above example contains the button using only HTML. Click the above button to open bootstrap modal. Now, click outside of the modal and check if its close. You can see that, the modal close only on click inner modal close button.

Also, on pressing of the escape button of a keyboard, the modal will not open.

You may also like to read.

Hope, you like this tutorial on how to prevent closing bootstrap modal. If you have any query regarding the tutorial, please comment below.

Also tell me, which method are you using to stop closing bootstrap modal on click outside.click only inside the modal. Get more visitors click or more conversion by using these method.

Join the Conversation

1 Comment

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