how to destroy bootstrap modal window completely?

Question

I've made use of modal window for a wizard implementation which has around 4,5 steps. I need to destroy it completely after the last step(onFinish) and OnCancel step without having a page refresh. I can of course hide it, but hiding modal windows restores everything as such when i open up it again. Could anyone help me on this issue?

Thanks Any hints answers are helpful for me.

Answer 1

I don't know how this may sound but this work for me...........

$("#YourModalID").modal('hide');

Answer 2

if is bootstrap 3 you can use:

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

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

Answer 4

Also works on bootstrap 4.x

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

Answer 5

This worked for me.

$('.modal-backdrop').removeClass('in');
$('#myDiv').removeClass('in');

The dialog and backdrop went away, but they came back the next time I clicked the button.

Answer 6

It works for Bootstrap v3.3.6

$('#dialog').modal()
.on('hide.bs.modal', function () {
    // Some Code
}).on('shown.bs.modal', function () {
    // Some Code
}).on('hidden.bs.modal', function () {
    $("#dialog").off();
});