Question

This is a reformulated question from the original posted here

I have a page with a jQuery UI Dialog, and I open Fancybox from a link inside of such Dialog window.

The typical UI Dialog init is like:

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

… and the typical Fancybox (v2.1.1 in this example) init like:

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

… so far so good, nothing special. Then the html :

 <div id="dialog-modal" title="jQuery UI modal dialog">
  <p>You should be able to close this UI Dialog using the "escape" key.</p><br />
  <a class="fancybox" href="images/01.jpg" title="Press the 'escape' key to close Fancybox" >Open Fancybox</a>
 </div>

Now, the issue is, if I close Fancybox using the “escape” key, both Fancybox AND the UI Dialog (from where I launched fancybox) are closed.

Both Fancybox and UI Dialog can be closed using the escape key but ideally I would like to keep the UI Dialog opened after closing Fancybox (with the escape key) … if close Fancybox with the close button for instance, the UI Dialog remains opened.

To illustrate the issue, I created a DEMO here.

So how can I close Fancybox using the escape key without closing the UI Dialog from where I opened Fancybox?

Answer 1

The solution :

Disable the escape event in both Fancybox and the UI Dialog and catch any escape event to close manually either Fancybox (if opened) or the UI Dialog otherwise.

In order to avoid to be closed pressing the escape key, both plugins offer an API option … so for the UI Dialog add the closeOnEscape option set to false like :

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

… for Fancybox use the keys API option like :

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

… then catch the document’s escape event ( using jQuery .keyup() ) and close manually Fancybox (if opened) or the UI Dialog otherwise with this function:

$(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

See working DEMO and feel free to explore the source code.

Tested in Chrome v22.0.1229.94 m, Firefox v16.0.1, IE7+, Opera v11.61(1250) and Safari (Windows) v5.1.7(7534.57.2)