<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
>
$(document).ready(function () {
$("#showText").click(function () {
$("#text").show();
$("#myModal").modal("handleUpdate");
});
});
</
script
>
</
head
>
<
body
>
<
div
class
=
"text-center"
>
<
h1
class
=
"text-success"
>
GeeksforGeeks
</
h1
>
<
strong
>Bootstrap 5 Modal Live Demo
</
strong
>
<
br
>
<
button
type
=
"button"
class
=
"btn btn-lg btn-success mt-4"
data-bs-toggle
=
"modal"
data-bs-target
=
"#myModal"
>
Launch Modal
</
button
>
<
div
id
=
"myModal"
class
=
"modal fade"
tabindex
=
"-1"
>
<
div
class
=
"modal-dialog"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-header"
>
<
h5
class
=
"modal-title"
>
In this modal dynamic heights is added by jQuery.
</
h5
>
<
button
type
=
"button"
class
=
"btn-close"
data-bs-dismiss
=
"modal"
>
</
button
>
</
div
>
<
div
class
=
"modal-body"
>
<
p
>
<
button
type
=
"button"
id
=
"showText"
class
=
"btn btn-link"
>
Click here to see more about jQuery.
</
button
>
</
p
>
<
div
style
=
"display:none;"
id
=
"text"
>
<
p
>
jQuery is an open source JavaScript library
that simplifiesthe interactions between an
HTML/CSS document
</
p
>
<
ol
>
<
li
>
<
p
>
Finding some elements
(via CSS selectors) and doing something
with them (via jQuery methods)
</
p
>
</
li
>
<
li
>
<
p
>
Chaining multiple jQuery methods on a set
of elements Using the jQuery wrapper and
implicit iteration
</
p
>
</
li
>
</
ol
>
</
div
>
</
div
>
<
div
class
=
"modal-footer"
>
<
button
type
=
"button"
class
=
"btn btn-danger"
data-bs-dismiss
=
"modal"
>
Ok, I got it
</
button
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>