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 4.
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-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 4 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 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="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/4.6.2/css/bootstrap.min.css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/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);
$("#MyPopup").modal("show");
});
$("#btnClosePopup").click(function () {
$("#MyPopup").modal("hide");
});
});
</script>
Screenshot
![Bootstrap 4: 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
