Bootstrap 5 Modal Live demo
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.
HTML
<!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:
Bootstrap 5 Modal Live demo
Example 2: The code below demonstrates a Live Demo of a modal with dynamic heights using jQuery.
HTML
<!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:
Bootstrap 5 Modal Live demo
Reference: https://getbootstrap.com/docs/5.0/components/modal/#live-demo
Please Login to comment...