close bootstrap modal with javascript
$('#myModal').modal('hide');
modal dismiss
<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
Source: getbootstrap.com
when modal close event
$("yourid").on('hide.bs.modal', function(){ // do it here });
bootstrap modal on close
$('#myModal').on('hidden.bs.modal', function () { // do something… });
Source: stackoverflow.com
data-dismiss="modal" in js
$('.close').click();
Source: stackoverflow.com
Close Modal
.close.mat-button { position: absolute; top: 0; right: 0; padding: 5px; line-height: 14px; min-width: auto; } <button class="close" mat-button [mat-dialog-close]="true">X</button>