What does .modal(‘dispose’) do in Bootstrap 4 ?

In Bootstrap 4, .modal(‘dispose’) is a function defined to destroy the modal. The modal remains a part of the DOM even after using .modal(‘dispose’), this function only destroys the current instance of the modal component.

Syntax:

$("#modalID").modal("dispose");

Example: This example illustrates the use of .modal(‘dispose’) method. When the dispose button is clicked, the jQuery instance of the modal component gets deleted. Hence, none of the other modal functions work after the button has been clicked.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Dispose Modal</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" 
          href=
    <script src=
  </script>
    <script src=
  </script>
    <script src=
  </script>
</head>
  
<body>
    <button id="clickBtn" 
            class="btn btn-primary">
      Click Me!
  </button>
  
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Example Modal</h5>
                    <button id="dismissBtn"
                            type="button"
                            class="close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    Body of the Modal
                </div>
                <div class="modal-footer">
                    <button id="closeBtn"
                            class="btn btn-secondary">
                      Close
                  </button>
                    <button id="disposeBtn"
                            class="btn btn-secondary">
                      Dispose
                  </button>
                </div>
            </div>
        </div>
    </div>
</body>
  
<script>
    $(document).ready(function() {
        $("#clickBtn").click(function() {
            $("#myModal").modal('show');
        });
        $("#dismissBtn").click(function() {
            $("#myModal").modal('hide');
        });
        $("#closeBtn").click(function() {
            $("#myModal").modal('hide');
        });
        $("#disposeBtn").click(function() {
            $("#myModal").modal('dispose');
        });
    });
</script>
  
</html>

chevron_right


Output:

Note: To close the modal after using the dispose function, we can modify the above code to hide the modal and remove the fade class along with destroying it.

$("#disposeBtn").click(function(){
     $("#myModal").removeClass('fade').modal('hide');
     $("#myModal").modal("dispose");
});



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.