Bootstrap 5 Modal dispose() Method Last Updated : 31 Jul, 2024 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 modal provides us with some utility methods and they can be used to manage the modal in different ways. The dispose() method is used to destroy the modal instance which is automatically created when the modal is triggered. The instance of the modal is destroyed from the DOM by this method but the markup of the modal is not removed from the DOM. Syntax:modalSelector.dispose();Example 1: The code demonstrates how we can use the dispose() method using JavaScript, and we can use the dev tools in a browser like Chrome to understand how the modal's instance is being destroyed. 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("demoBtn"); btn.addEventListener("click", function () { var demoModal = bootstrap.Modal.getInstance( document.getElementById("demoModal") ); console.log(demoModal); demoModal.dispose(); console.log(demoModal); }); }); </script> </head> <body> <h1 class="mt-3 ms-3 text-success"> GeeksforGeeks </h1> <h4 class="mt-3 ms-3"> Bootstrap 5 Modal dispose() Method </h4> <div class="m-4"> <div class="text-center"> <button type="button" class="btn btn-lg btn-success" data-bs-toggle="modal" data-bs-target="#demoModal"> Launch Modal </button> <p class="mt-4"> When the modal is triggered a new Instance of the modal is created and it is destroyed when the below button is clicked. </p> <button type="button" id="demoBtn" class="btn btn-lg btn-danger fixed-bottom mx-auto w-25 mb-4"> Dispose Modal </button> </div> <div id="demoModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"> This is a demo modal </h5> <button type="button" class="btn-close" data-bs-dismiss="modal"> </button> </div> <div class="modal-body"> <p>This modal's instance is being disposed from the DOM using JavaScript.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> CLose </button> </div> </div> </div> </div> </div> </body> </html> Output:Example 2: The code demonstrates how we can use the dispose() method using jQuery, and we can use the dev tools in a browser like chrome to understand how the modal's instance is being destroyed. 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() { $("#demoBtn").click(function() { var demoModal = bootstrap.Modal.getInstance($("#demoModal")[0]); console.log(demoModal); $("#demoModal").modal("dispose"); console.log(demoModal); }); }); </script> </head> <body> <h1 class="mt-3 ms-3 text-success"> GeeksforGeeks</h1> <h4 class="mt-3 ms-3"> Bootstrap 5 Modal dispose() Method </h4> <div class="m-4"> <div class="text-center"> <button type="button" class="btn btn-lg btn-success" data-bs-toggle="modal" data-bs-target="#demoModal"> Launch Modal </button> <p class="mt-4"> When the modal is triggered a new Instance of the modal is created and it is destroyed when the below button is clicked. </p> <button type="button" id="demoBtn" class="btn btn-lg btn-danger fixed-bottom mx-auto w-25 mb-4"> Dispose Modal </button> </div> <div id="demoModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"> This is a demo modal </h5> <button type="button" class="btn-close" data-bs-dismiss="modal"> </button> </div> <div class="modal-body"> <p> This modal's instance is being disposed from the DOM using JQuery. </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> Close </button> </div> </div> </div> </div> </div> </body> </html> Output:Reference: https://getbootstrap.com/docs/5.0/components/modal/#dispose Comment More infoAdvertise with us T triashabiswas Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-5 Similar Reads 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 Bootstrap 5 Modal Options Bootstrap 5 Modal option can be used in two ways using data attributes and using JavaScript. Options are added to append different utilities and properties to the modal like having a backdrop on the background while the modal is open, etc.Bootstrap 5 Modal Options Attribute:data-bs-*: Options should 3 min read Like