如何讓jQuery UI的對話框中使用「越獄」鍵

-1

這是從原來的posted here 如何讓jQuery UI的對話框中使用「越獄」鍵

我有一個jQuery UI Dialog頁面的重新問題開閉時的fancybox，我從裏面的鏈接打開的fancybox這樣的對話窗口。

典型用戶界面對話框的init是這樣的：

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

...和典型的fancybox（V2.1.1在這個例子中）INIT喜歡：

$(".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和用戶界面對話框（從那裏我發起的fancybox）關閉。

雙方的fancybox和用戶界面對話框可以使用escape關鍵，但理想我想保持用戶界面對話框關閉的fancybox（與escape鍵）打開後......如果關閉的fancybox關閉與實例close按鈕，UI對話框保持打開狀態。我想創建一個DEMO here。

那麼，如何關閉Fancybox使用escape密鑰而不關閉從我打開Fancybox的UI對話框？

來源

2012-10-12 JFK

「有些向下票數下跪反應「......沒有評論的投票是無用的;） – JFK

解決辦法：

禁用兩者的fancybox和用戶界面對話框的escape事件和捕捉任何escape事件手動要麼的fancybox（如果打開）或用戶界面對話框否則關閉。

爲了避免被關閉按下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（如果開啓）或用戶界面對話框OT herwise具有此功能：

$(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米測試，火狐v16.0.1，IE7 +，歌劇v11.61（1250）和Safari（Windows）中v5.1.7（7534.57.2）

來源

2012-10-12 18:45:32 JFK

如何讓jQuery UI的對話框中使用「越獄」鍵

回答

相關問題