Bootstrap 5 Modal getOrCreateInstance() Method
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/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> <!-- Bootstrap Javascript --> < script src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body > < center > < div class = "container" > < div > < h1 class = "text-success" > w3wiki </ 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" > w3wiki </ h1 > </ div > < div class = "modal-body" > w3wiki is a computer science portal for the Beginner. 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/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> <!-- Bootstrap Javascript --> < script src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body > < center > < div class = "container" > < div > < h1 class = "text-success" > w3wiki </ 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" > w3wiki 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
Contact Us