<!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>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h4>Bootstrap 5 Modal Dynamic heights</h4>
<pre class="ml-4">Click on the button below to open the Modal</pre>
<button type="button"
class="btn btn-success"
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>