BootstrapHTMLJavaScriptjQuery

Prevent Bootstrap Modal from disappearing when clicking outside

0
7.5k
2018 / 10 / 24

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 -->
</div>

 

Solution # 2: Using jQuery

Another solution is to do using jQuery. For example:

<script type="text/javascript">
  $('#myModal').modal({
     backdrop: 'static',
     keyboard: false
  });
</script>

 

Hi, I am a full-stack web developer with 5+ years of experience in working with different web technologies. Do you want to ask something? just send me a message through the contact form. Please visit my portfolio at hamzamehmood.com. Thanks