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 =
rel = "stylesheet" >
< script src =
</ 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 =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ 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