Bootstrap 5 Modal plugin is used to create a customized webpage where we can add dialog boxes for user notifications and lightboxes. Bootstrap 5 modal can hide the content on demand with the help of JavaScript or via data attributes. Default scrolling behavior can also be overridden by modal and it gives a click area for dismissing the models which are shown on the webpage by using the .modal-backdrop class.
We will discuss the usage of Bootstrap 5 Modal usages.
Bootstrap 5 Modal Usage
- Via Data Attributes: We can activate a modal without using JavaScript by setting the value of the modal for data-toggle on the button tag which is a controller element. We should mention the targeted modal that we want to toggle by using data-target=”#ModalName”
- Via JavaScript: We can also create a modal with the help of JavaScript which will help to manipulate the modal dynamically and to create an interactive web page.
- Options: Options can be passed via data attributes or JavaScript.
- Methods: There are different methods in JavaScript with the help of which we can manipulate the modal according to the user’s need.
- Events: Few events of Bootstrap modal classes are used for the functionality of the modal.
Example 1: The following code triggers a modal with id “modal”.
<!DOCTYPE html> < html >
< head >
<!-- Bootstrap CDN -->
< link rel = "stylesheet"
href =
integrity =
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin = "anonymous" >
</ script >
</ head >
< body style = "text-align: center;" >
< div class = "container mt-3" style = "width: 700px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
<!-- Button trigger modal -->
< button type = "button" class = "btn btn-primary"
data-toggle = "modal" data-target = "#Modal" >
Launch demo modal
</ button >
<!-- Modal -->
< div class = "modal fade" id = "Modal" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" >
Modal title
</ h5 >
< button type = "button" class = "close"
data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" >
×
</ span >
</ button >
</ div >
< div class = "modal-body" >
GeeksforGeeks
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: The following code toggles the modal using JavaScript. The modal will be automatically toggled.
<!DOCTYPE html> < html >
< head >
<!-- Bootstrap CDn -->
< link rel = "stylesheet"
href =
integrity =
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin = "anonymous" >
</ script >
</ head >
< body style = "text-align: center;" >
< div class = "container mt-3" style = "width:700px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
<!-- Button trigger modal -->
< button type = "button" class = "btn btn-primary"
data-toggle = "modal" data-target = "#Modal" >
Launch demo modal
</ button >
<!-- Modal -->
< div class = "modal fade" id = "Modal" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" >
Modal title
</ h5 >
< button type = "button" class = "close"
data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" >
×
</ span >
</ button >
</ div >
< div class = "modal-body" >
GeeksforGeeks
</ div >
</ div >
</ div >
</ div >
</ div >
< script >
var myModal =
new bootstrap.Modal(document.getElementById('Modal'))
myModal.toggle()
</ script >
</ body >
</ html >
|
Output:
Example 3: The following code is used to see the example of show.bs.modal where we can open to modal alternatively.
<!DOCTYPE html> < html >
< head >
<!-- Bootstrap CDN -->
< link rel = "stylesheet" href =
integrity =
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin = "anonymous" />
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin = "anonymous" >
</ script >
</ head >
< body style = "text-align: center;" >
< div class = "container mt-3"
style = "width: 700px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
<!-- Button trigger modal -->
< button type = "button"
class = "btn btn-primary"
data-toggle = "modal"
data-target = "#exampleModal"
data-whatever = "@geeksforgeeks" >
Send email to @geeksforgeeks
</ button >
< button type = "button"
class = "btn btn-primary"
data-toggle = "modal"
data-target = "#exampleModal"
data-whatever = "@gurrrung" >
Send email to author @gurrrung
</ button >
<!-- Modal -->
< div class = "modal fade" id = "exampleModal" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" >
New message
</ h5 >
< button type = "button"
class = "close"
data-dismiss = "modal"
aria-label = "Close" >
< span aria-hidden = "true" >
×
</ span >
</ button >
</ div >
< div class = "modal-body" >
< form >
< div class = "mb-3" >
< label for = "recipient-name"
class = "col-form-label" >
Recipient:
</ label >
< input type = "text"
class = "form-control"
id = "recipient-name" />
</ div >
< div class = "mb-3" >
< label for = "message-text"
class = "col-form-label" >
Message:
</ label >
< textarea class = "form-control"
id = "message-text" >
</ textarea >
</ div >
</ form >
</ div >
< div class = "modal-footer" >
< button type = "button"
class = "btn btn-secondary"
data-dismiss = "modal" >
Close
</ button >
< button type = "button"
class = "btn btn-primary" >
Send message
</ button >
</ div >
</ div >
</ div >
</ div >
</ div >
< script >
var exampleModal =
document.getElementById("exampleModal");
exampleModal.addEventListener(
"show.bs.modal", function (event) {
// Button that triggered the modal
var button = event.relatedTarget;
// Extract info from data-* attributes
var recipient =
button.getAttribute("data-whatever");
// Update the modal's content.
var modalTitle =
exampleModal.querySelector(".modal-title");
var modalBodyInput =
exampleModal.querySelector(".modal-body input");
modalTitle.textContent =
"New message to " + recipient;
modalBodyInput.value = recipient;
});
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/modal/#usage