web-dev-qa-db-fra.com

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

J'ai utilisé modal window pour une implémentation d'assistant comportant environ 4,5 étapes. J'ai besoin de le détruire complètement après les last step (onFinish) et OnCancel sans avoir d'actualisation de page. Je peux bien sûr le cacher, mais cacher des fenêtres modales restaure tout en tant que tel quand je le rouvre à nouveau. Quelqu'un pourrait-il m'aider sur cette question? 

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

twitter-bootstrapmodal-dialog
71
Akki

si c'est bootstrap 3, vous pouvez utiliser:

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

REMARQUE: cette solution ne fonctionne que pour Bootstrap avant la version 3. Pour une réponse à Bootstrap 3, reportez-vous à celui-ci de user2612497 .

Ce que tu veux faire c'est:

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

cela amènera le modal à s’initialiser chaque fois qu’il est montré. Donc, si vous utilisez du contenu distant pour charger dans la div ou autre chose, il le refera chaque fois qu'il sera ouvert. Vous détruisez simplement l'instance modale après chaque fois qu'elle est masquée.

Ou chaque fois que vous voulez déclencher la destruction de l'élément (au cas où ce ne serait pas réellement chaque fois que vous le cachez), il vous suffit d'appeler la ligne du milieu:

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

Le bootstrap de Twitter cherche à localiser son instance dans l'attribut de données. Si une instance existe, il la bascule simplement. Si une instance n'existe pas, elle en crée une nouvelle.

J'espère que cela pourra aider.

39
Conar Welsh

Pour la version 3.x

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

Pour la version 2.x (risque; lisez les commentaires ci-dessous) Lorsque vous créez trois éléments d'amorçage modaux sur votre page en cours de modification. Donc, si vous voulez annuler complètement toutes les modifications, vous devez le faire manuellement pour chacune d’elles.

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

Vous pouvez complètement détruire un modal sans recharger votre page de cette façon.

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

mais il va complètement supprimer modal de votre page html. Après ce show masqué ne fonctionnera pas.

12
Arjun

D'après ce que j'ai compris, vous ne voulez pas l'enlever, ni le cacher? Parce que vous voudrez peut-être le réutiliser plus tard… mais ne voulez-vous pas qu'il contienne l'ancien contenu si vous l'ouvrez de nouveau?

<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 vous voulez l'utiliser comme modèle dynamique, faites quelque chose comme:

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

....

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

....

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

J'ai essayé d'accepter la réponse mais cela ne semble pas fonctionner et je ne sais pas comment la réponse acceptée doit fonctionner.

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

Cela fonctionne parfaitement bien de mon côté. Version BS> 3

3
طلحة

Le pouvoir de jQuery. $(selector).modal('hide').destroy(); supprimera tout d'abord l'effet que vous pourriez avoir sur l'effet de glissement, puis supprimera complètement l'élément. Toutefois, si vous souhaitez que l'utilisateur puisse ouvrir le modal à nouveau une fois les étapes terminées. vous voudrez peut-être simplement mettre à jour les paramètres que vous souhaitez réinitialiser. Ainsi, pour réinitialiser toutes les entrées de votre modal, cela ressemblerait à ceci:

$(selector).find('input, textarea').each(function(){
   $(this).val('');
});
3
John In't Hout

Si vous avez un iframe dans votre modal, vous pouvez supprimer son contenu à l'aide du code suivant:

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

bootstrap 3 + jquery 2.0.3:

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

Mon approche serait d’utiliser la méthode clone() de jQuery. Il crée une copie de votre élément, et c'est ce que vous voulez: une copie de votre premier modal non modifié, que vous pouvez remplacer à votre guise: 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);
});

Le balisage que j'ai utilisé est le plus élémentaire. Il vous suffit donc de lier les bons éléments/événements et de réinitialiser votre assistant.

Faites attention à lier avec les événements délégués , ou à chaque nouvelle liaison, réinitialisez les éléments internes de votre modal afin que chaque nouveau modal se comporte de la même manière.

2
Sherbrow

Fonctionne également sur bootstrap 4.x

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

J'ai eu un même scénario où je voudrais ouvrir un nouveau modal sur un clic de bouton. Une fois cela fait, je veux le supprimer complètement de ma page ... J'utilise remove pour supprimer le modal .. Cliquez sur le bouton pour vérifier si le modal existe, et si c'était le cas, je le détruirais et en créerais un nouveau ..

$("#wizard").click(function() {
    /* find if wizard is already open */
    if($('.wizard-modal').length) {
        $('.wizard-modal').remove();
    }
});
1
Vikalp Veer
$('#myModal').on('hidden.bs.modal', function () {
      $(this).data('bs.modal', null).remove();
});

//Just add .remove(); 
//Bootstrap v3.0.3
1
Luca Di Lenardo

seulement cela a fonctionné pour moi

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

Il est prudent de forcer les sélecteurs à les rendre vides, car la version de bootstrap et jquery peut être la raison de ce problème

0
Amir

Cela a fonctionné pour moi.

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

Le dialogue et la toile de fond ont disparu, mais ils sont revenus la prochaine fois que j'ai cliqué sur le bouton.

0
Rob Y

Cela fonctionne pour 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();
});
0
Maksym Kalin

Avec ui-router cela peut être une option pour vous. Il recharge le contrôleur à la fermeture afin de réinitialiser le contenu modal avant son prochain déclenchement. 

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

Je devais utiliser le même mode pour différents clics sur les liens. Je viens de remplacer le contenu html par "" du modal vide dans le rappel masqué.

0
guy_fawkes

Je dois détruire le modal juste après sa fermeture par un clic sur un bouton.

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

Notez que cela fonctionne avec Bootstrap 3.

0
visualjoel

Suppression complète d'une seule ligne sur la peau (ES6) 

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

0
Dieter Gribnitz

Cela supprime complètement le modal du DOM et fonctionne également pour les modaux "ajoutés". 

#pickoptionmodal est l'id de ma fenêtre modale.

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

e.preventDefault();

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

});
0
Alin Razvan

Si l'ombre modale reste plus sombre et ne va pas montrer plus d'un modal, cela sera utile

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