comment détruire complètement la fenêtre modale de bootstrap ?

Question

J'ai fait usage de fenêtre modale pour une mise en œuvre de l'assistant qui comporte environ 4,5 étapes. J'ai besoin de le détruire complètement après l'étape dernière étape (surFinish) et Étape OnCancel sans rafraîchissement de la page . Je peux bien sûr la masquer, mais le fait de cacher la fenêtre modale rétablit tout tel quel lorsque je l'ouvre à nouveau. Quelqu'un peut-il m'aider à résoudre ce problème ?

Merci Toutes les réponses aux questions sont utiles pour moi.

Answer 1

La puissance de jQuery. $(selector).modal('hide').destroy(); supprimera d'abord les éléments qui pourraient avoir un effet de glissement, puis supprimera complètement l'élément. Cependant, si vous souhaitez que l'utilisateur puisse rouvrir la modale après avoir terminé les étapes, vous pouvez simplement mettre à jour uniquement les paramètres que vous souhaitez réinitialiser, donc pour réinitialiser toutes les entrées de votre modale, cela ressemblerait à ce qui suit :

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

Answer 2

Fonctionne également sur bootstrap 4.x

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

Answer 3

Bootstrap 3 + jquery 2.0.3 :

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

Answer 4

Si vous avez un iframe dans votre modale, vous pouvez supprimer son contenu en utilisant le code suivant :

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

Answer 5

Mon approche consisterait à utiliser le clone() de jQuery. Elle crée une copie de votre élément, et c'est ce que vous voulez : une copie de votre première modale inchangée, que vous pouvez remplacer à votre guise : Démonstration (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);
});

Le balisage que j'ai utilisé est le plus basique, donc vous devez juste lier les bons éléments/événements, et vous devriez avoir votre assistant réinitialisé.

Soyez prudent. à lier avec événements délégués ou lier à nouveau à chaque réinitialisation les éléments internes de votre modale afin que chaque nouvelle modale se comporte de la même manière.