-1

これは、ここに投稿された元の質問から再構成された質問です

jQuery UI Dialogのあるページがあり、そのような Dialog ウィンドウ内のリンクから Fancybox を開きます。

典型的な UI ダイアログの初期化は次のようになります。

 $("#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 (キーを使用) を閉じた後も UI ダイアログを開いたままにしたいと思います...たとえば、ボタンでescapeFancybox を閉じると、UI ダイアログは開いたままになります。close

この問題を説明するために、ここに DEMOを作成しました。

escapeでは、Fancyboxを開いたところから UI ダイアログを閉じずに、キーを使用して Fancybox を閉じるにはどうすればよいでしょうか?

4

1 に答える 1

4

ソリューション ：

escapeFancybox と UI ダイアログの両方でイベントを無効にし、任意のescapeイベントをキャッチして Fancybox (開いている場合) または UI ダイアログを手動で閉じます。

キーを押して閉じるのを避けるためにescape、両方のプラグインが API オプションを提供しています...そのため、UI ダイアログの場合、 likecloseOnEscapeに設定されたオプションを追加します。false

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

... Fancybox の場合、次のようなキー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

動作する DEMOを参照し、ソース コードを自由に調べてください。

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 に答える