Bootstrap 5 Modal handleUpdate() Method Last Updated : 26 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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: HTML <!DOCTYPE html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/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: HTML <!DOCTYPE html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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 Comment More infoAdvertise with us Next Article Bootstrap 5 Modal Remove Animation P priyanshuchatterjee01 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads Bootstrap 5 Varying Modal Content Bootstrap 5 Modal Content can be varied by passing the value which needed to be accessed in the modal to a data-bs-* (where * can be anything you like) attribute of the triggering button. The value passes to the modal can be accessed using JavaScript and can be used in the modal content. Bootstrap 5 4 min read Bootstrap 5 Toggle Between Modals Bootstrap 5 Toggle Between Modals is used to switch between modals, this does not mean there can be multiple opened modals, only one modal at a time can be opened, by using this feature we can trigger the other modal that will replace the current modal content with the new ones.Bootstrap 5 Toggle be 3 min read Bootstrap 5 Modal Change Animation Bootstrap 5 Modal Change animation facilitates several variables that determine the animation transformation state of the modal, along with setting the zoom-in & zoom-out animation for the modal. The Modal opens with a fade-in animation when it is triggered using a button, although, this animati 4 min read Bootstrap 5 Modal Remove Animation Bootstrap 5 Modal is used to show dialogues to the frontend user using bootstrap's JavaScript library. The Modal used Bootstrap's fade animation when it is opened and closed. The animations can be removed by removing the fade class from the modal component or by manually setting the transition and t 3 min read Bootstrap 5 Modal Dynamic Heights A website can have dialogues added for lightboxes, user notifications, or entirely unique content by using Bootstrap modals. Dynamic heights can be implemented which can be really useful in a modal that changes the content shown in it. This can be achieved using the modal.handleupdate() function. Sy 3 min read Bootstrap 5 Modal Optional Sizes Bootstrap 5 Modal Optional sizes have different optional sizes, to be placed along with the modal-dialog class. This is used to create different sizes modals.Bootstrap 5 Modal Optional sizes Classes:modal-sm: This class is used for creating a small modal having a width of 300px.modal-lg: This class 2 min read Bootstrap 5 Fullscreen Modal Bootstrap 5 Fullscreen Modal is used to create a modal that completely covers the entire screen of the user.Bootstrap 5 Fullscreen Modal Used CLasses:modal-fullscreen: This class is used to create Full Screen Modalmodal-fullscreen-*-down: This class is used to create a full-screen modal based upon b 2 min read Bootstrap 5 Modal Usage Bootstrap 5 Modal plugin is used to create a customized webpage where we can add dialog boxes for user notifications and lightboxes. Bootstrap 5 modal can hide the content on demand with the help of JavaScript or via data attributes. Default scrolling behavior can also be overridden by modal and it 4 min read Bootstrap 5 Modal Via data attributes Bootstrap 5 Modal Via data attributes can activate a modal, by setting data-bs-toggle="modal" on an element, like a button. We can also toggle a specific modal by using a data-bs-target="#foo" or href="#foo". Bootstrap 5 Modal Via data attributes: data-bs-toggle="modal": To tell the button, that we 2 min read Bootstrap 5 Modal Via JavaScript Bootstrap 5 modal via JavaScript allows for the dynamic creation of models using JavaScript. Utilize Bootstrap's modal API to trigger modal display, content loading, and event handling for interactive and responsive user experiences.Prerequisite: Bootstrap 5 Modal Bootstrap 5 Modal Usage MethodsBoot 2 min read Like