comment vérifier si l'utilisateur a fermé la boîte de dialogue en cliquant sur l'icône croix dans le dialogue de l'interface utilisateur jquery

Question

J'ai deux boîtes de dialogue. L'utilisateur sélectionne une valeur dans le premier et il est reflété dans DOM de la page. La première boîte de dialogue est fermée et une autre est affichée. Si l'utilisateur clique sur le bouton croisé dans le coin supérieur droit pour fermer la boîte de dialogue, je souhaite annuler les modifications apportées dans la boîte de dialogue précédente. Sur le bouton OK, je dois faire quelques trucs en définissant des valeurs. Sur ce bouton, je ferme la boîte de dialogue. En cas d'événement proche, jusqu'à présent, j'ai un code pour réinitialiser le formulaire. Mais, si l'utilisateur annule la boîte de dialogue, comment puis-je savoir, comment l'événement de fermeture a été déclenché, c'est-à-dire à partir du bouton OK ou du bouton croisé?

Answer 1

Vous pouvez trouver ce bouton « X » par sa catégorie, .ui-dialog-titlebar-close, puis attacher un gestionnaire à click lors de la création de la boîte de dialogue, comme ceci:

$("#test").dialog({ 
    //dialog options... 
}).parent().find(".ui-dialog-titlebar-close").click(function() { 
    alert("Closed by title bar X, clear the other form here"); 
}); 

You can test it here.

Answer 2

Vous pouvez utiliser l'événement beforeClose

Answer 3

aide id modèle

$('#myModalId').on('show.bs.modal', function (e) { 
    // Do your operation 
}) 

En utilisant la classe de mode

$('.myModalClass').on('show.bs.modal', function (e) { 
    // Do your operation 
}) 

Modèle

<div class="modal fade myModalClass" id="myModalId" role="dialog"> 
    // your code 
</div> 

lire la suite ici http://getbootstrap.com/javascript/#modals

Answer 4

J'ai trouvé la solution utile here par @Vickel

close: function(event, ui) { 
//some_code(); 
if(event.originalEvent){ 
    // triggered by clicking on dialog box X or pressing ESC 
    // not triggered if a dialog button was clicked 
    some_code(); 
}   
$(this).dialog('destroy') 
}