Bootstrap 5 Modal getOrCreateInstance() Method Last Updated : 31 Jul, 2024 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 Modal getOrCreateInstance() method is used to get the modal instance from a DOM element if it exists or to create a new example for the same element if not exist.Syntax:const modal = bootstrap.Modal.getOrCreateInstance('#modal-ID');Return Value: The Modal getOrCreateInstance() method returns the instance of the Bootstrap Modal either existing or new.Example 1: In this example, we get the instance of the modal using the getOrCreateInstance() method and then invoke its show() method to show the modal. HTML <!DOCTYPE html> <html lang="en"> <head> <!-- 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> <center> <div class="container"> <div> <h1 class="text-success"> GeeksforGeeks </h1> <strong> Bootstrap 5 Modal getOrCreateInstance() Method </strong> </div> <div class="modal fade" id="gfg"> <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" onclick="getOrCreateInstanceAndShow()"> Get/Create Modal Instance and Show It </button> </div> </center> <script> // Initialize the modal const myModal = new bootstrap.Modal('#gfg'); // Function Called on click of the Button function getOrCreateInstanceAndShow() { // Get the Instance const modal = bootstrap.Modal .getOrCreateInstance('#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 destroy an element’s modal and getOrCreateInstance() method of the modal to create and get a new instance. HTML <!DOCTYPE html> <html lang="en"> <head> <!-- 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> <center> <div class="container"> <div> <h1 class="text-success"> GeeksforGeeks </h1> <strong> Bootstrap 5 Modal getOrCreateInstance() 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"> Technical Scripter Event 2022 </h1> </div> <div class="modal-body"> GeeksforGeeks presents Technical Scripter Event 2022 - India’s Biggest Technical Content Writing Contest - an opportunity to hone your technical writing abilities and get paid fancy. </div> </div> </div> </div> <button class="btn btn-success mb-4" onclick="showModal()"> Show Modal </button> <br> <button class="btn btn-success mb-4" onclick="getOrCreateInstanceAndShow()"> Get/Create Modal Instance </button> <br> <button class="btn btn-danger mt-4" onclick="dispose()"> Dispose Model </button> </div> </center> <script> // Initialize the modal const myModal = new bootstrap.Modal('#gfg'); // Function Called on click of // the Dispose Button function dispose() { // Get the Instance const modal = bootstrap.Modal .getOrCreateInstance('#gfg'); // Dispose the Modal modal.dispose(); } // Function Called on click of // the Get/Create Modal Button function getOrCreateInstanceAndShow() { // Get the Instance const modal = bootstrap.Modal .getOrCreateInstance('#gfg'); // Show the Modal modal.show(); } // 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/#getorcreateinstance Comment More infoAdvertise with us S SHUBHAMSINGH10 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads 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 Bootstrap 5 Modal toggle() Method The Bootstrap 5 Modal toggle() method is used to directly toggle a modal i.e. show or hide. This method shows the result before the show or hide event occurs.Syntax:modal.toggle()Return Value: The user receives a direct response from this method before the modal is ever displayed or hidden.Example 1 2 min read Like