CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3bootstrap-modal
Master_T
Master_T

Reputation: 7913

bootstrap modal: close modal and remove from DOM

I have a page where I want to close a bootstrap 3 modal and then remove the modal itself from the DOM.

So, I've tried to do it this way:

let modal = $('#myModal');
modal.modal('hide');
modal.remove();

The problem is that this solution closes the modal popup itself but leaves the darkened semi-transparent background over the page. I suspect this is because the modal gets removed from the page before the closing animation completes.

I know I can just set an timer to wait a bit and ensure that the modal has closed before removing it from the DOM, but what I wanted to know is: is there a more "proper" way that doesn't rely on an arbitrary timer?

Upvotes: 1

Views: 6924

Answers (1)

SRK
SRK

Reputation: 3496

You can try this code.

Bootstrap 3

$('#myModal').on('hidden.bs.modal', function () {
    $('#myModal').remove();
});

Bootstrap 2.3.2

$('#myModal').on('hidden', function () {
    $('#myModal').remove();
});

The event will be triggered after modal close.

Upvotes: 5

Related Questions