<!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
>