In this article I will explain with an example, how to dismiss (close) Bootstrap Modal Popup programmatically.
Bootstrap has provided a function named modal to which when called with the parameter value hide, dismisses (closes) the Modal Popup.
HTML Markup
The following HTML Markup consists of an HTML Button element which will open the Bootstrap Modal Popup.
There’s another HTML Button (btnClosePopup) within the HTML DIV which is also assigned with jQuery Click event handler.
<!-- Bootstrap -->
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen" />
<!-- Bootstrap -->
<center>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#MyPopup">
Open Modal</button>
</center>
<!-- Modal Popup -->
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
Greetings
</h4>
</div>
<div class="modal-body">
Welcome to ASPSnippets.com
</div>
<div class="modal-footer">
<input type="button" id="btnClosePopup" value="Close" class="btn btn-danger" />
</div>
</div>
</div>
</div>
<!-- Modal Popup -->
Closing (Hiding) Bootstrap Modal Popup Window using jQuery
Inside the jQuery document ready event handler, the HTML Button (btnClosePopup) has been assigned Click event handler.
When the Close Button is clicked, the Bootstrap Modal Popup Window will be hidden (closed) using modal function and passing the parameter value hide.
<script type="text/javascript">
$(function () {
$("#btnClosePopup").click(function () {
$("#MyPopup").modal("hide");
});
});
</script>
Screenshot
![Dismiss (Close) Bootstrap Modal Popup programmatically]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
