Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.




<!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>


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");
});


Last Updated : 13 Mar, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads