<!doctype html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<link rel="stylesheet"
href="styles.css">
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function() {
$("#showText").click(function() {
$("#text").show();
$("#myModal").modal("handleUpdate");
});
});
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Modal Change animation
</h4>
<div class="container">
<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 modal has Dynamic Height using
<strong>jQuery</strong>.
</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>