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.
<!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 =
<!-- Bootstrap Javascript -->
< script src =
</ script >
< script src =
</ 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.
<!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 =
<!-- Bootstrap Javascript -->
< script src =
</ script >
< script src =
</ 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