In this article I will explain with an example, how to open (show)
Bootstrap 5 Modal Popup Window using
jQuery.
This article makes use of
Bootstrap version 5.
HTML Markup
The following
HTML Markup consists of an
HTML INPUT Button.
<input type="button" id="btnShowPopup" value="Show Popup" class="btn btn-info btn-lg" />
Applying Bootstrap Modal Popup Plugin
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
The
HTML Markup also consists of an
HTML DIV. The
HTML DIV has been applied with
Bootstrap 5 Modal Popup plugin.
<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/twitter-bootstrap/5.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js'></script>
<!-- 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">
<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">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
Opening (Showing) Bootstrap Modal Popup Window using jQuery
Inside the
jQuery document ready event handler, the Button has been assigned a
jQuery Click event handler.
Inside this
Click event handler, first the
title and
body values are set in their respective
HTML DIVs and the
Bootstrap Modal Popup Window will be opened (shown) using
show function.
<script type="text/javascript">
$(function () {
$("#btnShowPopup").on('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();
});
});
</script>
Screenshot
![Bootstrap 5: Open (Show) Modal Popup Window using jQuery]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
