Bootstrap 5 Modal getInstance() Method Last Updated : 01 Aug, 2024 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 Modal getInstance() method is used to get the modal instance from a DOM element if exists.Syntax:const modal = bootstrap.Modal.getInstance('#modal-ID');Return Value: The Modal getInstance() method returns the instance of the Bootstrap Modal.Example 1: In this example, we get the instance of the modal using the getInstance() method and then invoked its show() method to show the modal. 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"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" /> <!-- Bootstrap Javascript --> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div> <h1 class="text-success"> GeeksforGeeks </h1> <strong> Bootstrap 5 Modal getInstance() Method </strong> </div> <div class="modal fade" id="gfg" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title"> GeeksforGeeks </h1> </div> <div class="modal-body"> GeeksforGeeks is a computer science portal for the geeks. Here you can cosume computer science related content or share your knowledge with the world by contributing on the write portal. </div> </div> </div> </div> <button class="btn btn-success mt-4" onclick="getInstanceAndShow()"> Get Modal Instance and Show It </button> </div> <script> // Initialize the modal const myModal = new bootstrap.Modal('#gfg'); // Function Called on click of the Button function getInstanceAndShow() { // Get the Instance const modal = bootstrap.Modal.getInstance('#gfg'); // Show the Modal modal.show(); } </script> </body> </html> Output:Example 2: In this example, we used the getInstance() method of the modal to get its instance and then called its dispose() method so it can no longer be opened programmatically. 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"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" /> <!-- Bootstrap Javascript --> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div class="mt-5"> <h1 class="text-success"> GeeksforGeeks </h1> <strong> Bootstrap 5 Modal getInstance() Method </strong> </div> <div class="modal fade" id="gfg" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title"> DSA Self Paced </h1> </div> <div class="modal-body"> Most popular course on DSA trusted by over 75,000 students! Built with years of experience by industry experts and gives you a complete package of video lectures, practice problems, quizzes, discussion forums and contests. Start Today! </div> </div> </div> </div> <button class="btn btn-success mt-4" onclick="showModal()"> Show Modal </button> <button class="btn btn-danger mt-4" onclick="getInstanceAndDispose()"> Get Modal Instance and Dispose It </button> </div> <script> // Initialize the modal const myModal = new bootstrap.Modal('#gfg'); // Function Called on click of the Dispose Button function getInstanceAndDispose() { // Get the Instance const modal = bootstrap.Modal.getInstance('#gfg'); // Dispose the Modal modal.dispose(); } // Function Called on click of the Show Button function showModal() { // Get the Instance const modal = bootstrap.Modal.getInstance('#gfg'); // Show the Modal if It is not destroyed modal.show(); } </script> </body> </html> Output:Reference: https://getbootstrap.com/docs/5.0/components/modal/#getinstance Comment More infoAdvertise with us B badalmishra28 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads 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 Bootstrap 5 Fullscreen Modal Bootstrap 5 Fullscreen Modal is used to create a modal that completely covers the entire screen of the user.Bootstrap 5 Fullscreen Modal Used CLasses:modal-fullscreen: This class is used to create Full Screen Modalmodal-fullscreen-*-down: This class is used to create a full-screen modal based upon b 2 min read Bootstrap 5 Modal Usage 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 4 min read Bootstrap 5 Modal Via data attributes Bootstrap 5 Modal Via data attributes can activate a modal, by setting data-bs-toggle="modal" on an element, like a button. We can also toggle a specific modal by using a data-bs-target="#foo" or href="#foo". Bootstrap 5 Modal Via data attributes: data-bs-toggle="modal": To tell the button, that we 2 min read Bootstrap 5 Modal Via JavaScript 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 MethodsBoot 2 min read Bootstrap 5 Modal Options Bootstrap 5 Modal option can be used in two ways using data attributes and using JavaScript. Options are added to append different utilities and properties to the modal like having a backdrop on the background while the modal is open, etc.Bootstrap 5 Modal Options Attribute:data-bs-*: Options should 3 min read Bootstrap 5 Modal Passing options() Method Bootstrap 5 Modal can be triggered in two ways using data attributes and using JavaScript. Options are introduced to the modal to add other utilities and attributes, such as the ability to display a background image while the modal is active. The implementation of these Options through JavaScript is 3 min read Like