Question

中重新提出的问题

我有一个jQuery UI Dialog的页面，我从这个对话窗口的链接打开Fancybox。

典型的UI Dialog init类似于：

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

...和典型的Fancybox（本例中为v2.1.1）初始化为：

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

......到目前为止一切顺利，没什么特别的。然后是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>

现在，问题是，如果我使用“escape”键关闭Fancybox，则会关闭Fancybox和UI对话框（我从哪里启动fancybox）。

可以使用escape键关闭Fancybox和UI对话框，但理想情况我希望在关闭Fancybox（使用escape键）后保持UI对话框打开...例如，如果使用close按钮关闭Fancybox，则UI对话框仍保持打开状态。

为了说明这个问题，我创建了一个DEMO here。

那么如何在不关闭我打开Fancybox的UI对话框的情况下使用escape键关闭Fancybox？

Answer 1

解决方案：

禁用Fancybox和UI对话框中的escape事件，并捕获任何escape事件以手动关闭Fancybox（如果已打开）或UI对话框。

为了避免按escape键关闭，两个插件都提供API选项...因此，对于UI对话框，将closeOnEscape选项设置为false，如：

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

...对于Fancybox，使用keys API选项，如：

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

...然后捕获文档的escape事件（使用jQuery .keyup()）并手动关闭Fancybox（如果打开）或UI对话，否则使用此函数：

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

请参阅working DEMO，随时浏览源代码。

在Chrome v22.0.1229.94 m，Firefox v16.0.1，IE7 +，Opera v11.61（1250）和Safari（Windows）v5.1.7（7534.57.2）中测试

如何使用“escape”键关闭fancybox时保持jQuery UI对话框打开

1 个答案: