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