Bootstrap 5 Modal dispose() Method
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/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("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" > w3wiki </ 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/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() { $("#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" > w3wiki</ 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
Contact Us