<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
rel
=
"stylesheet"
>
</
script
>
<
script
>
$(document).ready(function() {
$("#showText").click(function() {
$("#text").show();
$("#myModal").modal("handleUpdate");
});
});
</
script
>
</
head
>
<
body
>
<
div
class
=
"m-4"
>
<
h1
class
=
"mt-3 text-success"
>
GeeksforGeeks
</
h1
>
<
h4
>Bootstrap 5 Modal handleUpdate() Method
</
h4
>
<
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"
>This is main modal being Triggered 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 simplifies the interactions
between an HTML/CSS document, or more precisely the Document Object Model (DOM),
and JavaScript.</
p
>
<
p
>Elaborating the terms, jQuery simplifies HTML document traversing
and manipulation, browser event handling, DOM animations, Ajax interactions,
and cross-browser JavaScript development.</
p
>
<
p
>jQuery is widely famous with its philosophy of “Write less, do more.”
This philosophy can be further elaborated as three concepts:</
p
>
<
ol
>
<
li
>
<
p
>Finding some elements (via CSS selectors) and doing something with them
(via jQuery methods) i.e. locate a set of elements in the DOM, and then do
something with that set of elements.</
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
>