Last Updated on July 29, 2022 by Roshan Parihar
In this tutorial, learn how to prevent closing Bootstrap modal when clicking outside the popup. The short answer is: use the Bootstrap attributes data-backdrop and data-keyboard to add to the button element that opens the modal popup on click.
You can also use the jQuery options backdrop and keyboard to disable clicking outside of the Bootstrap modal popup. It does not allow users to close the Bootstrap modal by clicking outside or disallow the keyboard ESC button to close the bootstrap modal.
But, what are the values for these Bootstrap attributes and jQuery options to add? Well, let’s find out with the examples given below to easily learn these methods.
Prevent Closing Bootstrap Modal When Clicking Outside Using only Bootstrap and HTML
To stop closing the Bootstrap modal when clicking outside using only Bootstrap, you have to add the Bootstrap attributes with their relevant values as data-backdrop="static" and data-keyboard="false" to the button element that displays modal popup on click.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<button type="button" id="MybtnPreventHTML" class="btn btn-primary" data-target="#MymodalPreventHTML" data-toggle="modal" data-backdrop="static" data-keyboard="false">Open Modal</button> <!-- .modal --> <div class="modal fade" id="MymodalPreventHTML"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Notification</h4> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
Output
Click below button to open modal popup.
The above example contains the button element and using only HTML content. You can click the above button to open the Bootstrap modal. Now, click outside of the modal and check if it’s close or not. You can see that the modal closes only on clicking the inner modal close button and not on clicking outside of the modal popup. The bootstrap modal prevent close on click outside with the use of HTML and Boostrap only.
Also, on pressing the escape (‘ESC’) button of a keyboard, the modal will not close.
You can stop closing the modal on mouse click outside of the Bootstrap modal popup. It is useful when you want your visitors to click only inside the modal popup button and force them to fill the signup form. It can help you to generate more leads and conversions by using the above methods.
Disable Clicking Outside of Bootstrap Modal Using jQuery
To prevent closing Bootstrap modal when click outside using jQuery, you have to use the two options with values as backdrop: 'static' and keyboard: false. The first option backdrop option disables closing modal on outside click event and the second option keyboard option prevents closing the Bootstrap modal on pressing the keyboard ‘ESC’ button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<script> $(document).ready(function(){ $('#MybtnModalPreventScript').click(function(){ $('#MymodalPreventScript').modal({ backdrop: 'static', keyboard: false }); }); }); </script> <button type="button" id="MybtnModalPreventScript" class="btn btn-primary">Open Modal</button> <!-- .modal --> <div class="modal fade" id="MymodalPreventScript"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Notification</h4> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
Output
Click below button to open modal popup.
The above example contains the button to open the modal. When you click the above button, it opens the Bootstrap modal. Now, click outside of the modal after opening it. The bootstrap modal prevent close on click outside. The above jQuery method prevents closing the Bootstrap modal with the outside clicks event.
The above method needs some jQuery to add to perform this task. However, if you want to perform this task by using only HTML then it’s better to use Bootstrap given above.
FAQS on Prevent Closing Bootstrap Modal When Clicking Outside
1. How Do I Stop My Modal From Closing When I Click Outside?
Answer: To stop modal from closing when clicking outside, you can use the Bootstrap attribute data-backdrop with its value set to static. The attribute should be added to the button element that opens the modal on click.
2. How to Enable Click Outside of Bootstrap Modal Area to Close Modal?
Answer: To enable click outside of the Bootstrap modal area to close modal, you need to remove the Bootstrap attribute data-backdrop="static". After you remove the attribute, your modal starts closing when clicking outside of the Bootstrap modal area.
3. How to Use jQuery to Close Modal on Click Outside?
Answer: To use jQuery to close modal on click outside, you have to apply the click event to the button element that opens the modal. After that, use the this.modal('show'); to display modal and close on click outside.
4. How to Prevent Modal Popup From Closing on Button Click?
Answer: To prevent modal popup from closing on button click, you have to remove the attribute data-dismiss="modal" from the button that closes the modal on click. After removing the attribute, you can check your modal will not close on button click.
5. How to Prevent Popup From Closing When You Click Outside Popup?
Answer: To prevent popup from closing when you click outside popup, you can use the jQuery button event and use the method $(this).modal(); function. Inside that function, you have to use the keyword backdrop with its value static.
The second example given above shows the same method that you check and use.
DOWNLOAD Free Bootstrap CHEAT SHEET
Related Posts
Thank you