In this article I will explain with an example, how to show and hide (open and close) Bootstrap Modal Popup Window using jQuery.
This article makes use of Bootstrap version 3.
HTML Markup
The following HTML Markup consists of:
Button – For showing Bootstrap Modal Popup Window.
DIV – For displaying Modal Popup content.
The HTML DIV consisting of Sub DIVs which will be used to display Title, Body and Close buttons of Bootstrap Modal Popup Window.
    <input type="button" id="btnShowPopup" value="Show Popup" class="btn btn-info btn-lg" />
<!-- 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">
                <h4 class="modal-title"></h4>
            <div class="modal-body">
            <div class="modal-footer">
                <input type="button" id="btnClosePopup" value="Close" class="btn btn-danger" /></div>
Script for Showing and Hiding Bootstrap Modal Popup Window
Inside the HTML Markup, the following Bootstrap 3 CSS file is inherited.
1. bootstrap.min.css
And then, the following jQuery and Bootstrap 3 JS files are inherited.
1. jquery.min.js
2. bootstrap.min.js
Inside the jQuery document ready event handler, the buttons for showing and hiding Modal Popup have been assigned with the jQuery click event handlers.
Opening Bootstrap Modal Popup
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 with passing the parameter value show.
Closing Bootstrap Modal Popup
When the Close Button is clicked, the Bootstrap Modal Popup Window will be hidden (closed) using modal function with passing the parameter value hide.
<!-- Bootstrap -->
<script type="text/javascript" src=""></script>
<link rel="stylesheet" href="" media="screen" />
<script type="text/javascript" src=""></script>
<!-- Modal Popup -->
<script type="text/javascript">
    $(function () {
        $("#btnShowPopup").click(function () {
            var title = "Greetings";
            var body = "Welcome to";
            $("#MyPopup .modal-title").html(title);
            $("#MyPopup .modal-body").html(body);
        $("#btnClosePopup").click(function () {
Show Hide (Open Close) Bootstrap Modal Popup Window using jQuery
Browser Compatibility
The above code has been tested in the following browsers.
Microsoft Edge  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.

Other available versions