Bootstrap 5 Modal live demo demonstrates the toggle of a working modal by clicking a button that opens a modal. The modal content slides down but fades in from the top after the toggle action. Different components are assembled together to create a Modal. Modals can be triggered using the data attributes or JavaScript.
Bootstrap 5 Modal Live demo class: There are no specific classes for a live demo, a combination of modal classes is used along with the modal class.
Bootstrap 5 Offcanvas Modal Demo Attribute:
- data-bs-target: It accepts a CSS selector to apply javascript to hide or show MoDAL.
Syntax:
<div class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"> <!-- Modal title --!> </h5> </div> <div class="modal-body"> <!-- Modal body--!> </div> </div> </div> </div>
Example 1: The code below demonstrates a live Demo of a basic modal with a grid.
<!doctype html> < html lang = "en" >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ head >
< body >
< h1 class = "m-4" class = "text-success" >
GeeksforGeeks
</ h1 >
< h4 class = "ms-4" >Bootstrap 5 Live Demo</ h4 >
< div class = "container" >
< button type = "button" class = "btn btn-success mt-4" data-bs-toggle = "modal" data-bs-target = "#cardModal" >
Launch Modal
</ button >
< div class = "modal fade" id = "cardModal" tabindex = "-1" aria-labelledby = "cardModalLabel" aria-hidden = "true" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" id = "cardModalLabel" >
This Modal Contains a Grid
</ h5 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" >
</ button >
</ div >
< div class = "modal-body" >
< div class = "container mt-4 p-4" >
< div class = "row text-light mb-3" >
< div class = "col-7 bg-success border" >
First Column
</ div >
< div class = "col-5 bg-success border" >
Second Column
</ div >
</ div >
< div class = "row text-light" >
< div class = "col-6 bg-secondary border" >
First Column
</ div >
< div class = "col-6 bg-secondary border" >
Second Column
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: The code below demonstrates a Live Demo of a modal with dynamic heights using jQuery.
<!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 Live Demo
</ 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 >
< 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/#live-demo