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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
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=
"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 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
