In this article I will explain with an example, how to close (hide) Bootstrap Modal Popup Window using jQuery.
The Close Button is assigned a jQuery Click event handler and when the Close Button is clicked, the Bootstrap Modal Popup Window will be hidden (closed) using modal function and passing the parameter value hide.
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
![Close (Hide) Bootstrap Modal Popup Window using jQuery]()
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
