<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<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>