Comment garder la boîte de dialog de l’interface utilisateur de jQuery ouverte lors de la fermeture de fancybox à l’aide de la touche “escape”

Ceci est une question reformulée de l’original posté ici

J’ai une page avec une boîte de dialog jQuery UI , et j’ouvre Fancybox à partir d’un lien situé à l’intérieur de cette fenêtre.

Le dialog typique de l’interface utilisateur ressemble à ceci:

$("#dialog-modal").dialog({ height: 240, modal: true }); // dialog

… et la Fancybox typique (v2.1.1 dans cet exemple) init comme:

  $(".fancybox").fancybox({ closeClick: false, helpers: { title : { type : 'inside' } } }); // fancybox

… jusqu’ici tout va bien, rien de spécial. Puis le html:

   You should be able to close this UI Dialog using the "escape" key.

 Open Fancybox

Maintenant, le problème est que, si je ferme Fancybox en utilisant la touche ” escape “, Fancybox ET le dialog de l’interface utilisateur (à partir de l’endroit où j’ai lancé fancybox) sont fermés.

Fancybox et UI Dialog peuvent être fermés à l’aide de la touche Échap mais, dans l’ idéal, j’aimerais que le dialog UI soit ouvert après la fermeture de Fancybox (avec la touche Échap) … si vous fermez Fancybox avec le bouton de close par exemple, le dialog UI rest ouvert. .

Pour illustrer le problème, j’ai créé une DEMO ici .

Alors, comment puis-je fermer Fancybox à l’aide de la touche d’ escape sans fermer la boîte de dialog de l’interface utilisateur à partir de l’endroit où j’ai ouvert Fancybox?

La solution :

Désactivez l’événement d’ escape dans Fancybox et la boîte de dialog d’interface utilisateur et attrapez tout événement d’ escape afin de fermer manuellement la boîte de fantaisie (si elle est ouverte) ou la boîte de dialog d’interface utilisateur sinon.

Afin d’éviter d’être fermé en appuyant sur la touche d’ escape , les deux plugins offrent une option API … donc pour la boîte de dialog d’interface utilisateur, ajoutez l’option closeOnEscape définie sur false comme closeOnEscape :

 $("#dialog-modal").dialog({ height: 240, modal: true, closeOnEscape: false // disable escape event on dialog }); // dialog

… pour Fancybox, utilisez l’API des clés comme:

 $(".fancybox").fancybox({ closeClick: false, helpers: { title: { type: 'inside' } }, keys: { close: [null] // disable escape on fancybox } }); // fancybox

… puis attrapez l’événement d’ escape du document (à l’aide de jQuery .keyup () ) et fermez manuellement Fancybox (si ouvert) ou la boîte de dialog de l’interface utilisateur, sinon avec cette fonction:

 $(document).keyup(function (event) { if (event.keyCode === 27) { // if fancybox is opened, close it, otherwise close dialog if ($.fancybox.isActive) { $.fancybox.close(); } else { $("#dialog-modal").dialog("close"); } } }); //keyup

Voir travailler avec DEMO et n’hésitez pas à explorer le code source.

Testé dans Chrome v22.0.1229.94 m, Firefox v16.0.1, IE7 +, Opera v11.61 (1250) et Safari (Windows) v5.1.7 (7534.57.2)