Prevent Bootstrap Modal from disappearing when clicking outside


In web applications if you face a situation where you wish to show an important alert popup to users and its a risk that people may miss the popup by clicking outside the area of popup than this article is for you.

It will show you how you can restrict users to close modal only by clicking the close button, and wouldn’t allow them to close modal attentionally or intentionally when they click outside the area of modal.


Solution # 1: Using HTML

If you use HTML, simply add attributes data-backdrop="static" data-keyboard="false" in the main div of your modal. For example:

<div id="myModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
<!-- modal code goes here -->


Solution # 2: Using jQuery

Another solution is to do using jQuery. For example:

<script type="text/javascript">
     backdrop: 'static',
     keyboard: false


Related Posts