A website can have dialogues added for lightboxes, user notifications, or entirely unique content by using Bootstrap modals. A modal is made up of components like the dialog, content, header, title, body, and footer. A modal can be used to implement a lot of utilities like showing a message or popping open the logging-in portal.
Bootstrap 5 Modal Components: To create a modal you will need multiple components, like a header, body, footer, etc. Each component has it's own class and all the components that can be used to create a modal are described below with the class.
- Modal: To create a modal we need to use the basic class of .modal first.
- Modal Dialog: It encloses the total modal dialog box to create a dialog use .modal-dialog class.
- Modal Content: The .modal-content class is used to put the content in the modal, which contains the header, title, body & footer(optional).
- Modal Header: The .modal-header class specifies the header that holds the title part, closing button, or maybe an avatar or image too.
- Modal Title: The modal header contains the title of the modal to put the modal we need to use the .modal-title class
- Modal Body: This is one of the components in modal, to put a body in you need to use the .modal-body class.
- Modal Footer(Optional): The .modal-footer class specifies the total footer that holds the control buttons which might include closing buttons or submit buttons or maybe saving changes button.
Syntax:
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<!-- Modal title goes Here --!>
</h5>
</div>
<div class="modal-body">
<!-- Modal body text goes here --!>
</div>
<div class="modal-footer">
<!-- Modal Footer text goes here --!>
</div>
</div>
</div>
</div>
Example 1: The code below demonstrates how we can use the different components of a modal.
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Modal components
</strong>
<br>
<!-- Button Trigger Modal -->
<button type="button"
class="btn btn-lg btn-success"
data-bs-toggle="modal"
data-bs-target="#myModal">
Launch Modal
</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
This is main modal
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<div id="text">
<p>
A data structure is a storage that is used
to store and organize data.
</p>
<p>
It is a way of arranging data on a computer so that
it can be accessed and updated efficiently.
</p>
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-danger"
data-bs-dismiss="modal">
Ok, I got it
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: The code below demonstrates how we can use the different components of a modal and also add dynamic heights to a modal using jQuery.
Note: Here in this example, we used display: none; property, .d-none class will not work in this case
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
<script>
$(document).ready(function () {
$("#showText").click(function () {
$("#text").show();
$("#myModal").modal("handleUpdate");
});
});
</script>
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Modal Components
</strong>
<br>
<!-- Button Trigger Modal -->
<button type="button"
class="btn btn-lg btn-success mt-4"
data-bs-toggle="modal"
data-bs-target="#myModal">
Launch Modal
</button>
<!-- The Modal -->
<div id="myModal" class="modal fade"
tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
In this modal dynamic heights is added by jQuery.
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<p>
<button type="button"
id="showText"
class="btn btn-link">
Click here to see more about jQuery.
</button>
</p>
<div style="display: none;" id="text">
<p>
jQuery is an open source JavaScript library
that simplifiesthe interactions between an
HTML/CSS document
</p>
<p>
Elaborating the terms, jQuery simplifies HTML
document traversing and manipulation, browser
event handling, DOM animations etc
</p>
<p>
jQuery is widely famous with its philosophy of
“Write less, do more.” This philosophy can be
further elaborated as three concepts:
</p>
<ol>
<li>
<p>
Finding some elements
(via CSS selectors) and doing something
with them (via jQuery methods)
</p>
</li>
<li>
<p>
Chaining multiple jQuery methods on a set
of elements Using the jQuery wrapper and
implicit iteration
</p>
</li>
</ol>
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-danger"
data-bs-dismiss="modal">
Ok, I got it
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/modal/#modal-components