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