Bootstrap 5 Modal Via JavaScript Last Updated : 06 Aug, 2024 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 modal via JavaScript allows for the dynamic creation of models using JavaScript. Utilize Bootstrap's modal API to trigger modal display, content loading, and event handling for interactive and responsive user experiences.Prerequisite: Bootstrap 5 Modal Bootstrap 5 Modal Usage MethodsBootstrap 5 Modal Via JavaScript Classes & Methods: To use the class you need to have knowledge about Bootstrap 5 Modal, and Bootstrap 5 Modal Usage Methods.Syntax:var myModal = new bootstrap.Modal(document.getElementById('modal-id'));Example 1: In this example, we are initializing the Modal using JavaScript and using its toggle() method to toggle its visibility. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div> <h5>Bootstrap 5 Modal Via JavaScript</h5> </div> <button class="btn btn-success" onclick="toggleModal1()"> Toggle Modal </button> <div id="gfg" class="modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"> GeeksforGeeks </h5> </div> <div class="modal-body"> <p> Bootstrap 5 is the newest version of bootstrap it is a free open source front-end development framework </p> </div> </div> </div> </div> </div> <script> var modal1 = new bootstrap.Modal(document.getElementById('gfg')); function toggleModal1() { // Toggle Modal modal1.toggle(); // Toggle the modal again after 3 seconds setTimeout(() => { modal1.toggle(); }, 3000) } </script> </body> </html> Output:Bootstrap Modal Via JavaScript Example OutputExample 2: In this example, the modal is initialized and the visibility is changed using its show() and hide() methods via JavaScript. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div class="header"> <h3 class="text-success">GeeksforGeeks</h3> <h5>Bootstrap 5 Modal Via JavaScript</h5> </div> <button class="btn btn-success" onclick="showhide()"> Show and after 5 seconds Hide the Modal </button> <div id="gfg" class="modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"> GeeksforGeeks </h5> </div> <div class="modal-body"> <p> it is a dialog box/popup window that is displayed on top of the current page. </p> </div> </div> </div> </div> </div> <script> var modal1 = new bootstrap.Modal(document.getElementById('gfg')); function showhide() { // show Modal modal1.show(); // hide the modal after 5 seconds setTimeout(() => { modal1.hide(); }, 5000) } </script> </body> </html> Output:Bootstrap 5 Modal Via JavaScript Example Output Comment More infoAdvertise with us P prashantrathore1159 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads 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 Bootstrap 5 Modal Dynamic Heights A website can have dialogues added for lightboxes, user notifications, or entirely unique content by using Bootstrap modals. Dynamic heights can be implemented which can be really useful in a modal that changes the content shown in it. This can be achieved using the modal.handleupdate() function. Sy 3 min read Bootstrap 5 Modal Optional Sizes Bootstrap 5 Modal Optional sizes have different optional sizes, to be placed along with the modal-dialog class. This is used to create different sizes modals.Bootstrap 5 Modal Optional sizes Classes:modal-sm: This class is used for creating a small modal having a width of 300px.modal-lg: This class 2 min read Like