In this article I will explain with an example, how to open (show) Bootstrap Modal Popup Window using jQuery.
The Button will be assigned a jQuery Click event handler. When the Button is clicked, the Bootstrap Modal Popup Window is opened (shown) on Client Side using jQuery.
 
 
HTML Markup
The following HTML Markup consists of an HTML Button assigned with a jQuery Click event handler and an HTML DIV which will be displayed as Modal Popup Window using Bootstrap.
<!-- 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">
                <button type="button" class="btn btn-danger" data-dismiss="modal">
                    Close</button>
            </div>
        </div>
    </div>
</div>
 
 
Open (Show) Bootstrap Modal Popup Window using jQuery
Inside the jQuery document ready event handler, the Button has been assigned a Click event handler.
Inside this Button Click event, first the title and body values are set in their respective HTML DIVs and the Bootstrap Modal Popup Window will be opened (shown) using modal function and passing the parameter value show.
<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");
        });
    });
</script>
 
 
Screenshot
Open (Show) 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