如何使用“escape”关闭fancybox时保持jQuery UI对话框打开键 [英] How to keep the jQuery UI dialog opened when closing fancybox using the "escape" key

问题描述

这是原版在此发布的重新提出的问题

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

典型的UI对话初始化如下：

  $ （＃dialog-modal）。dialog（{
 height：240，
 modal：true 
}）; //对话框
  

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

  $（。fancybox）。fancybox（{
 closeClick：false，
 helpers：{ 
 title：{type：'inside'} 
} 
}）; // fancybox 
  

...到目前为止一切都很好，没什么特别的。然后是html：

 < div id =dialog-modaltitle =jQuery UI模态对话框> 
< p>您应该可以使用escape键关闭此UI对话框。< / p>< br /> 
< a class =fancyboxhref =images / 01.jpgtitle =按'escape'键关闭Fancybox>打开Fancybox< / a> 
< / div> 
  

现在，问题是，如果我使用 escape <关闭Fancybox / code>密钥，Fancybox和UI对话框（我发布fancybox的地方）都已关闭。

可以使用转义键关闭Fancybox和UI对话框，但理想情况下我想要在关闭Fancybox之后保持UI对话框打开（使用转义键）...如果关闭Fancybox并且关闭按钮，UI对话框仍然打开。





为了说明这个问题，我创建了一个 escape 键没有关闭我打开Fancybox的UI对话框？

解决方案

解决方案：

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

为了避免按逃逸 key，两个插件都提供API选项...因此对于UI对话框添加 closeOnEscape 选项设置为 false 喜欢：

  $（＃dialog-modal）。dialog（{
 height：240，
 modal：true，
 closeOnEscape：false //禁用对话框
}上的转义事件;）; //对话框
  

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

  $（。 fancybox）。fancybox（{
 closeClick：false，
 helpers：{
 title：{
 type：'inside'
} 
}，
键：{
 close：[null] //在fancybox上禁用转义
} 
}）; // fancybox 
  

...然后捕获文档的转义事件（使用jQuery .keyup（））并手动关闭Fancybox（如果已打开）或使用此功能的UI对话框：

  $（document）.keyup（function（event）{
 if（event） .keyCode === 27）{
 //如果打开fancybox，关闭它，否则关闭对话框
 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）

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?

解决方案

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)

这篇关于如何使用“escape”关闭fancybox时保持jQuery UI对话框打开键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！