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=
"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>
<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=
"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>
<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