Bootstrap 5 Modal Usage Last Updated : 25 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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 UsageVia 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". HTML <!DOCTYPE html> <html> <head> <!-- Bootstrap CDN --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" 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:Bootstrap 5 Modal UsageExample 2: The following code toggles the modal using JavaScript. The modal will be automatically toggled. HTML <!DOCTYPE html> <html> <head> <!-- Bootstrap CDn --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" 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> let myModal = new bootstrap.Modal(document.getElementById('Modal')) myModal.toggle() </script> </body> </html> Output:Bootstrap 5 Modal UsageExample 3: The following code is used to see the example of show.bs.modal where we can open to modal alternatively. HTML <!DOCTYPE html> <html> <head> <!-- Bootstrap CDN --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous" /> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" 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> let exampleModal = document.getElementById("exampleModal"); exampleModal.addEventListener( "show.bs.modal", function (event) { // Button that triggered the modal let button = event.relatedTarget; // Extract info from data-* attributes let recipient = button.getAttribute("data-whatever"); // Update the modal's content. let modalTitle = exampleModal.querySelector(".modal-title"); let 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 Comment More infoAdvertise with us Next Article Bootstrap 5 Modal Static backdrop A ayushdey110 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads 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 attri 3 min read Bootstrap 5 Modal Static backdrop Bootstrap 5 Modal Static backdrop facilitates the modal that will not be going to be closed while clicking outside of the modal, by setting the backdrop to static. Modal Static backdrop Classes: There are no specific classes used in Modal Static backdrop. Although, we can create the modal using Moda 2 min read Bootstrap 5 Modal Scrolling long content Bootstrap 5 Modal Scrolling long content is used when modal body content becomes very large then it becomes scrollable. Modals can either be scrolled independently of the page or we can scroll the modal body. We will learn about them using examplesSyntax:<div class="modal-dialog modal-dialog-scro 2 min read Bootstrap 5 Modal Vertically Centered Bootstrap 5 Modal Vertically Centered is used to make the modal centered aligned. Modals are positioned over everything else in the document and the scroll gets removed from the <body> so that modal content scrolls instead. Using bootstrap modal classes we can make the modal body align vertica 3 min read Bootstrap 5 Modal Tooltips and Popovers Bootstrap 5 provides a robust way to enhance user interfaces through modals, tooltips, and popovers. These components help in displaying additional information to users without cluttering the main content. Tooltips offer brief descriptions, while popovers can contain more detailed information. Both 4 min read Bootstrap 5 Modal Using the Grid Bootstrap 5 Modal Using the grid can add content which can be anything from text to images to anything we want. We can also create layouts inside a modal too, Grid System being one of the main tools for creating responsive layout modals. So we can add different settings and variations of the Grid Sy 3 min read Bootstrap 5 Varying Modal Content Bootstrap 5 Modal Content can be varied by passing the value which needed to be accessed in the modal to a data-bs-* (where * can be anything you like) attribute of the triggering button. The value passes to the modal can be accessed using JavaScript and can be used in the modal content. Bootstrap 5 4 min read Bootstrap 5 Toggle Between Modals Bootstrap 5 Toggle Between Modals is used to switch between modals, this does not mean there can be multiple opened modals, only one modal at a time can be opened, by using this feature we can trigger the other modal that will replace the current modal content with the new ones.Bootstrap 5 Toggle be 3 min read Bootstrap 5 Modal Change Animation Bootstrap 5 Modal Change animation facilitates several variables that determine the animation transformation state of the modal, along with setting the zoom-in & zoom-out animation for the modal. The Modal opens with a fade-in animation when it is triggered using a button, although, this animati 4 min read Bootstrap 5 Modal Remove Animation Bootstrap 5 Modal is used to show dialogues to the frontend user using bootstrap's JavaScript library. The Modal used Bootstrap's fade animation when it is opened and closed. The animations can be removed by removing the fade class from the modal component or by manually setting the transition and t 3 min read Like