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.
<!DOCTYPE html> < html lang = "en" >
< head >
<!-- Bootstrap CSS -->
< link rel = "stylesheet" href =
<!-- Bootstrap Javascript -->
< script src =
</ script >
< script src =
</ 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.
<!DOCTYPE html> < html lang = "en" >
< head >
<!-- Bootstrap CSS -->
< link rel = "stylesheet" href =
<!-- Bootstrap Javascript -->
< script src =
</ script >
< script src =
</ 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