Open In App

Bootstrap 5 Modal handleUpdate() Method

Improve
Improve
Like Article
Like
Save
Share
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>
          rel="stylesheet">
  </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>
          rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </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 



Last Updated : 04 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads