He hecho uso de la ventana modal para una implementación de asistente que tiene alrededor de 4,5 pasos. Necesito destruirlo por completo después del último paso (onFinish) y el paso OnCancel sin tener que actualizar la página . Por supuesto, puedo ocultarlo, pero ocultar las ventanas modales restaura todo como tal cuando lo abro de nuevo. ¿Alguien podría ayudarme con este tema?

Gracias Las respuestas a las sugerencias son útiles para mí.

si es bootstrap 3 puedes usar:

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

NOTA: Esta solución solo funciona para Bootstrap antes de la versión 3. Para obtener una respuesta de Bootstrap 3, consulte esta de user2612497 .

Lo que quieres hacer es:

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

eso hará que el modal se inicialice a sí mismo cada vez que se muestre. Entonces, si está utilizando contenido remoto para cargar en el div o lo que sea, lo volverá a hacer cada vez que se abra. Simplemente está destruyendo la instancia modal después de cada vez que se oculta.

O siempre que desee activar la destrucción del elemento (en caso de que no lo sea cada vez que lo oculta) solo tiene que llamar a la línea media:

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

Twitter bootstrap busca que su instancia esté ubicada en el atributo de datos, si existe una instancia, simplemente la alterna, si una instancia no existe, creará una nueva.

Espero que ayude.

Para la versión 3.x

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

Para la versión 2.x (arriesgado; lea los comentarios a continuación) Cuando crea bootstrap modal, se cambian tres elementos en su página. Entonces, si desea revertir por completo todos los cambios, debe hacerlo manualmente para cada uno de ellos.

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

Puede destruir completamente un modal sin recargar la página de esta manera.

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

pero eliminará completamente modal de su página html. Después de este espectáculo de ocultar modal no funcionará.

He intentado la respuesta aceptada, pero no parece funcionar de mi parte y no sé cómo se supone que funciona la respuesta aceptada.

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

Esto está funcionando perfectamente bien de mi lado. Versión BS> 3

El poder de jQuery. $(selector).modal('hide').destroy();primero eliminará los sinds, es posible que tenga el efecto de deslizamiento y luego eliminará el elemento por completo, sin embargo, si desea que el usuario pueda abrir el modal nuevamente después de completar los pasos. es posible que solo desee actualizar solo la configuración que desea restablecer, por lo que para restablecer todas las entradas en su modal, esto se vería así:

$(selector).find('input, textarea').each(function(){
   $(this).val('');
});

Por lo que tengo entendido, ¿no quieres eliminarlo ni ocultarlo? Porque es posible que desee reutilizarlo más tarde ... pero ¿no quiere que tenga el contenido anterior si alguna vez lo vuelve a abrir?

<div class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

Si quieres usarlo como plantilla dinámica, haz algo como

$(selector).modal({show: true})

....

$(selector).modal({show: false})
$(".modal-body").empty()

....

$(".modal-body").append("new stuff & text")
$(selector).modal({show: true})

bootstrap 3 + jquery 2.0.3:

$('#myModal').on('hide.bs.modal', function () {
   $('#myModal').removeData();
})

Si tiene un iframe en su modal, puede eliminar su contenido mediante el siguiente código:

$('#myModal').on('hidden.bs.modal', function(){
   $(this).find('iframe').html("");
   $(this).find('iframe').attr("src", "");
});

Mi enfoque sería utilizar el clone()método de jQuery. Crea una copia de su elemento, y eso es lo que quiere: una copia de su primer modal inalterado, que puede reemplazar cuando lo desee: Demo (jsfiddle)

var myBackup = $('#myModal').clone();

// Delegated events because we make a copy, and the copied button does not exist onDomReady
$('body').on('click','#myReset',function() {
    $('#myModal').modal('hide').remove();
    var myClone = myBackup.clone();
    $('body').append(myClone);
});

El marcado que utilicé es el más básico, por lo que solo necesita vincular los elementos / eventos correctos, y debe restablecer su asistente.

Tenga cuidado de enlazar con eventos delegados , o volver a enlazar en cada reinicio los elementos internos de su modal para que cada nuevo modal se comporte de la misma manera.

Esta es mi solución:

this.$el.modal().off();

Tuve el mismo escenario en el que abriría un nuevo modal al hacer clic en un botón. Una vez hecho esto, quiero eliminarlo por completo de mi página ... utilizo eliminar para eliminar el modal. Al hacer clic en el botón, verificaría si el modal existe, y si es cierto, lo destruiría y crearía un nuevo modal.

$("#wizard").click(function() {
    /* find if wizard is already open */
    if($('.wizard-modal').length) {
        $('.wizard-modal').remove();
    }
});

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

//Just add .remove(); 
//Bootstrap v3.0.3

Esto elimina completamente el modal del DOM, también funciona para los modales "añadidos".

#pickoptionmodal es la identificación de mi ventana modal.

$(document).on('hidden.bs.modal','#pickoptionmodal',function(e){

e.preventDefault();

$("#pickoptionmodal").remove();

});

Tengo que destruir el modal justo después de cerrarlo con un clic de botón, y se me ocurrió lo siguiente.

$("#closeModal").click(function() {
    $("#modal").modal('hide').on('hidden.bs.modal', function () {
        $("#modal").remove();
    });
});

Tenga en cuenta que esto funciona con Bootstrap 3.

También funciona en bootstrap 4.x

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

Si la sombra modal permanece más oscura y no va a mostrar más de un modal, esto será útil

$('.modal').live('hide',function(){
    if($('.modal-backdrop').length>1){
        $('.modal-backdrop')[0].remove();
    }
});

Tuve que usar el mismo modal para diferentes clics en enlaces. Acabo de reemplazar el contenido html con "" vacío del modal en la devolución de llamada oculta.

Esto funcionó para mí.

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

El diálogo y el fondo desaparecieron, pero volvieron la próxima vez que hice clic en el botón.

Funciona para 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();
});

solo esto funcionó para mi

$('body').on('hidden.bs.modal', '.modal', function() {
    $('selector').val('');
});

Es seguro forzar a los selectores a dejarlos en blanco ya que las versiones de bootstrap y jquery pueden ser la razón de este problema

Eliminación completa de una sola línea en la piel (ES6)

$("#myModal").on('hidden.bs.modal', (e)=>e.currentTarget.remove());

Con ui-router, esta puede ser una opción para usted. Vuelve a cargar el controlador al cerrar, por lo que reinicializa el contenido modal antes de que se active la próxima vez.

$("#myModalId").on('hidden.bs.modal', function () {
  $state.reload();  //resets the modal
});

No sé cómo puede sonar esto, pero esto funciona para mí ...........

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