In this article I will explain with an example, how to Show and Hide (Open and Close) Bootstrap Modal Popup Window using jQuery.
There will be two Buttons i.e. first to show (open) the Bootstrap Modal Popup Window on Client Side using jQuery while second Button will be placed inside the Bootstrap Modal Popup Window and will be used to hide (close) the Bootstrap Modal Popup Window using jQuery.
 
 
HTML Markup
The following HTML Markup consists of an HTML Button (btnShowPopup) assigned with a jQuery Click event handler and an HTML DIV which will be displayed as Modal Popup Window using Bootstrap.
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>
    <input type="button" id="btnShowPopup" value="Show Popup" class="btn btn-info btn-lg" />
</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">
                    &times;</button>
                <h4 class="modal-title">
                </h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <input type="button" id="btnClosePopup" value="Close" class="btn btn-danger" />
            </div>
        </div>
    </div>
</div>
 
 
Show Hide (Open Close) Bootstrap Modal Popup Window using jQuery
Inside the jQuery document ready event handler, both the Buttons have been assigned Click event handlers.
When the Show Popup Button is clicked, first the title and body values are set in their respective HTML DIVs and the Bootstrap Modal Popup Window will be shown (opened) using modal function and passing the parameter value show.
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 () {
        $("#btnShowPopup").click(function () {
            var title = "Greetings";
            var body = "Welcome to ASPSnippets.com";
 
            $("#MyPopup .modal-title").html(title);
            $("#MyPopup .modal-body").html(body);
            $("#MyPopup").modal("show");
        });
 
        $("#btnClosePopup").click(function () {
            $("#MyPopup").modal("hide");
        });
    });
</script>
 
 
Screenshot
Show Hide (Open Close) 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