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 5.
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.
<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">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-bs-dismiss="modal">
×
</button>
</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>
Script for Showing and Hiding Bootstrap Modal Popup Window
Inside the HTML Markup, the following
Bootstrap 5 CSS file is inherited.
1. bootstrap.min.css
1. jquery.min.js
2. bootstrap.bundle.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.
Then, the
Bootstrap Modal function is called which accepts
ID of the modal dialog DIV as parameter and
show function is called on the modal instance to show (open) the Modal Popup.
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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<!-- Modal Popup -->
<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);
new bootstrap.Modal($("#MyPopup")).show();
});
$("#btnClosePopup").click(function () {
$("#MyPopup"bootstrap.Modal("hide");
});
});
</script>
Screenshot
![Bootstrap 5: Show Hide (Open Close) Bootstrap Modal Popup Window using jQuery]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
