-1

这是此处发布的原始问题的重新表述

我有一个带有jQ​​uery UI Dialog的页面，我从此类 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 的位置）都将关闭。

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

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

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

4

1 回答 1

4

解决方案 ：

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

为了避免按下escape键被关闭，两个插件都提供了一个 API 选项......所以对于 UI Dialog 添加closeOnEscape选项设置为falselike ：

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

查看工作演示并随意探索源代码。

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

于 2012-10-12T18:45:32.103 回答