bootstrap tutorial - How to prevent Bootstrap modal from closing when clicking outside - bootstrap examples - bootstrap templates - bootstrap 3
Use the Modal's backdrop Option :
- The backdrop or dark area will close and disappear when we click outside of the Bootstrap Modal window.
- Otherwise It will disappear when we are press the escape key inside the modal.
- But we want to prevent this from happening by using the following modal
Read Also
How to remove slide down effect from Bootstrap modalHow to change the default width of Bootstrap model box
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Disallow the Bootstrap Modal from Closing - Wikitechy</title>
<link rel="stylesheet" href="common/css/bootstrap.min.css">
<link rel="stylesheet" href="common/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="common/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".show").click(function(){
$("#model1").modal({
backdrop: 'static',
keyboard: false
});
});
});
</script>
</head>
<body>
<!-- Button to Trigger the Modal -->
<input type="button" class="btn btn-lg btn-primary show" value="Demo Modal">
<!-- HTML Modal -->
<div id="model1" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>- In this model we use the following options to show the backdrop area when we click outside
backdropoption tostaticandkeyboardoption tofalse
