A website can have dialogues added for lightboxes, user notifications, or entirely unique content by using Bootstrap modals. Modal development uses JavaScript, CSS, and HTML. If the modal height changes so that it exceeds the viewport height while it is open, handleUpdate() Method repositions the modal to compensate for the shock caused by the presence of the viewport scrollbar.
Syntax:
myModal.handleUpdate()Example 1: The example below demonstrates how we can implement the Modal handleUpdate() Method using JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
var btn = document.getElementById("showText");
btn.addEventListener("click", function () {
document.getElementById("text").style.display = "block";
var myModal = bootstrap.Modal.getInstance(document.getElementById("myModal"));
myModal.handleUpdate();
});
});
</script>
</head>
<body>
<div class="m-4">
<h1 class="mt-3 text-success">
GeeksforGeeks
</h1>
<h4>Bootstrap 5 Modal handleUpdate() Method
</h4>
<!-- Button Trigger Modal -->
<button type="button" class="btn btn-lg btn-success mt-4"
data-bs-toggle="modal"
data-bs-target="#myModal">
Launch Modal
</button>
<!-- The Modal -->
<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</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 Data Structures.
</button>
</p>
<div style="display: none;" id="text">
<p>A data structure is a storage that is used to
store and organize data.
</p>
<p>It is a way of arranging data on a computer
so that it can be accessed and
updated efficiently.
</p>
<p>A data structure is not only used for
organizing the data.
</p>
<p>It is also used for processing, retrieving,
and storing data.
</p>
<p>There are different basic and advanced types of
data structures that are used
in almost every program or software
system that has been developed. So we must
have good knowledge about data structures.
</p>
</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>
Output:
Example 2: The code below demonstrates how we can implement the Modal handleUpdate() Method using jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</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 Trigger Modal -->
<button type="button"
class="btn btn-lg btn-success mt-4"
data-bs-toggle="modal"
data-bs-target="#myModal">
Launch Modal
</button>
<!-- The Modal -->
<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>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/modal/#handleupdate
