<!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 Components
</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>
<p>
Elaborating the terms, jQuery simplifies HTML
document traversing and manipulation, browser
event handling, DOM animations etc
</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)
</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>