<!DOCTYPE html>
<html lang="en">
<head>
<link href=
rel="stylesheet"/>
<script src=
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
var btn = document.getElementById("demoBtn");
btn.addEventListener("click", function () {
var demoModal = bootstrap.Modal.getInstance(
document.getElementById("demoModal")
);
console.log(demoModal);
demoModal.dispose();
console.log(demoModal);
});
});
</script>
</head>
<body>
<h1 class="mt-3 ms-3 text-success">
GeeksforGeeks
</h1>
<h4 class="mt-3 ms-3">
Bootstrap 5 Modal dispose() Method
</h4>
<div class="m-4">
<div class="text-center">
<button type="button"
class="btn btn-lg btn-success"
data-bs-toggle="modal"
data-bs-target="#demoModal">
Launch Modal
</button>
<p class="mt-4">
When the modal is triggered a new Instance of
the modal is created and it is destroyed
when the below button is clicked.
</p>
<button type="button"
id="demoBtn"
class="btn btn-lg btn-danger
fixed-bottom
mx-auto w-25 mb-4">
Dispose Modal
</button>
</div>
<div id="demoModal"
class="modal fade"
tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
This is a demo modal
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<p>This modal's instance is being disposed
from the DOM using JavaScript.</p>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-bs-dismiss="modal">
CLose
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>