how to destroy bootstrap modal window completely?

Solution 1:

if is bootstrap 3 you can use:

$("#mimodal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
});

Solution 2:

NOTE: This solution works only for Bootstrap before version 3. For a Bootstrap 3 answer, refer to this one by user2612497.

What you want to do is:

$('#modalElement').on('hidden', function(){
    $(this).data('modal', null);
});

that will cause the modal to initialize itself every time it is shown. So if you are using remote content to load into the div or whatever, it will re-do it everytime it is opened. You are merely destroying the modal instance after each time it is hidden.

Or whenever you want to trigger the destroying of the element (in case it is not actually every time you hide it) you just have to call the middle line:

$('#modalElement').data('modal', null);

Twitter bootstrap looks for its instance to be located in the data attribute, if an instance exists it just toggles it, if an instance doesn't exist it will create a new one.

Hope that helps.

Solution 3:

For 3.x version

$( '.modal' ).modal( 'hide' ).data( 'bs.modal', null );

For 2.x version (risky; read comments below) When you create bootstrap modal three elements on your page being changed. So if you want to completely rollback all changes, you have to do it manually for each of it.

$( '.modal' ).remove();
$( '.modal-backdrop' ).remove();
$( 'body' ).removeClass( "modal-open" );

Solution 4:

You can completely destroy a modal without page reloading by this way.

$("#modal").remove();
$('.modal-backdrop').remove();

but it will completely remove modal from your html page. After this modal hide show will not work.