jQuery Girl
  1. jQuery Girl
  3. Choix dynamic de l’effet de fermeture sur une boîte de dialog jquery-ui
Intereting Posts
Utilisez Onload ou prêt? Survolez, passez la souris et sortez la souris JqGrid 4.9.0 gratuit – Format des dates sur Safari sur MAC jquery.final-countdown.js – besoin d’aide pour le configurer Conversion de code HTML nested en balises de citation bbCode Pagination automatique Phalcon avec jQuery convertir css hover en jquery hover comment obtenir les atsortingbuts de données d’un élément généré dynamicment Règles conditionnelles sur les champs basés sur jQuery.validator.addMethod Comment afficher un formulaire au clic de chaque bloc généré dynamicment dans meteor? Comment puis-je avoir le comportement d’attachement de jQuery à un élément après son insertion? Image en mouvement sur le chemin svg Comment envoyer des données avec la fonction de chargement dans jQuery Comment faire clignoter une image de marqueur dans google maps Interrogation des modifications de la firebase database: SqlDependency, SignalR is Good

Choix dynamic de l’effet de fermeture sur une boîte de dialog jquery-ui

J’utilise ce dialog: 

$("#myDialog").dialog({ hide: {effect: "fade", duration: 3000}, buttons: { Save: function() { $.post(someurl, function() { $("#myDialog").dialog( "close" ); }); }, Cancel: function() { $("#myDialog").dialog( "close" ); } } });

J’ai deux actions proches qui sont sémantiquement différentes:

  1. Fermer après succès – dans ce cas, je souhaite faire disparaître progressivement la boîte de dialog (j’affiche également une icône Vee verte, qui n’apparaît pas dans l’extrait de code ci-dessus).
  2. Fermer après annuler – je souhaite que le dialog disparaisse immédiatement, l’effet de fondu ne convient pas ici IMO.

Le code ci-dessus utilise simplement .dialog("close") dans les deux cas, les deux cas ayant donc le même effet de fondu.

Quel est le meilleur moyen d’obtenir une clôture instantanée sur le second cas, tout en conservant la décoloration lente dans le premier?

Edit : Je souhaite également que le fait de cliquer sur ESCAPE produise exactement le même effet que le bouton Annuler: fondu instantané.

Le moyen le plus simple de le faire est: 

 $("#myDialog").dialog({ hide: null, buttons: { Save: function() { $("#myDialog").dialog("option", "hide", "fade").dialog("close"); }, Cancel: function() { $("#myDialog").dialog("close"); } }, close: function(e) { $("#myDialog").dialog("option", "hide", null); } });

Il suffit de définir l’option masquer dans les deux cas: 

 $("#myDialog").dialog({ buttons: { Save: function() { $("#myDialog").dialog("option", "hide", "fade").dialog("close"); }, Cancel: function() { $("#myDialog").dialog("option", "hide", null).dialog("close"); } }, beforeClose: function(event, ui) { if (event.which === 27) { $("#dialog").dialog("option", "hide", false); } } });

DEMO

Pour votre cas “Close after success”, vous pouvez simplement émettre $ (‘.ui-dialog’ ‘). FadeOut (5000);

Voici comment j’ai utilisé ce qui précède: 

 $('input').keypress(function () { if ($(this).val() === "") { //works on 1st char you type $('.ui-dialog').fadeOut(5000); } });

En outre, au lieu d’ouvrir simplement, vous aurez besoin de: myDlg.dialog (‘close’). Dialog (‘open’);