How to intercept Bootstrap modal from closing
Posted By : Monu Thakur | 27-Jun-2016
By default, if you click outside of the modal box window i.e. on the backdrop or dark area it will close and evaporate. when you within unconditional, press the Esc key on the keyboard it happen. But you can intercept this from happening by setting the modal's backdrop option to static and keyboard option to false, like this:
Befor writting this code which is given below you have to include this library files in head tag:
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
$(document).ready(function(){
$('.launch-modalBox').click(function(){
$('#myModalBox').modal({
backdrop: 'static'
});
});
});
</script>
<div class="modal-example">
<!-- Button HTML (to Trigger Modal) -->
<input type="button" class="btn btn-lg btn-primary launch-modalBox" value="Launch Demo My Modal Box">
<!-- Modal HTML -->
<div id="myModalBox" 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>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</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</button>
</div>
</div>
</div>
</div>
</div>
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Monu Thakur
Monu is an experienced Frontend Developer, having good knowledge of Photoshop, illustrator, HTML5, CSS3, Less, Sass, Javascript, Jquery, Angular 4, Angular 4 theme integration.