web-dev-qa-db-ja.com

jqueryfancybox-fancyboxの外側のクリックで閉じるのを防ぎます

モーダルウィンドウに Fancybox プラグインを使用しています。どのオプションを使用しても、ユーザーがfancyboxモーダルウィンドウ（灰色の領域）の外側をクリックしたときに、fancyboxモーダルウィンドウが閉じるのを防ぐことはできないようです。

ユーザーにXまたは閉じるイベントをトリガーするボタンをクリックするように強制する方法はありますか？これは単純なはずなので、例を間違って読んでいるだけだといいのですが。

私はもう試した hideOnContentClick: falseしかし、それは私にとってはうまくいかないようです。何か案は？

javascriptjquerymodal-dialogfancybox
11
Mike

そのためのオプションはありません。ソースコードを変更する必要があります。

Jquery.fancybox-1.2.1.jsでは、_finishメソッドの341行目をコメントアウト（または削除）する必要があります。

//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);
4
Scott Dowding
   jQuery(".lightbox").fancybox({
        helpers     : {
            overlay : {
                speedIn  : 0,
                speedOut : 300,
                opacity  : 0.8,
                css      : {
                    cursor : 'default'
                },
                closeClick: false
            }
        },
    });
24
user1421770
<script type="text/javascript">
  $(document).ready(function() {
    $("#your_link").fancybox({
      'hideOnOverlayClick':false,
      'hideOnContentClick':false
    });
  });
</script>
11
cool_dev

私はfancybox1.3.1を使用しています。ボタンをクリックするだけでユーザーにモーダルボックスを閉じるように強制したい場合は、構成で次のように指定できます。

<script type="text/javascript">
  $(document).ready(function() {
    $("#your_link").fancybox({
      'hideOnOverlayClick':false,
      'hideOnContentClick':false
    });
  });
</script>
7
justinw

この問題については、この方法を試してください

$("YourElement").fancybox({
 helpers: {
        overlay: { closeClick: false } //Disable click outside event
    }

お役に立てれば。

6
Binh LE

Fancybox 1.2.6を使用している場合（私がプロジェクトに参加しているように）、オプションhideOnOverlayClickを見つけました。 falseに設定できます（例：hideOnOverlayClick：false）。

Scott Dowdingによる提案に基づいてコードを変更することを検討しているときに、このオプションを見つけました。

5
Mudasser Mian

上記のどれも私にはうまくいかなかったので、私はfancyboxの最新バージョンのために簡単なビットを書いただけです。

function load(parameters) {
    $('.fancybox-outer').after('<a href="javascript:;" onclick="javascript:{parent.$.fancybox.close();}" class="fancybox-item fancybox-close" title="Close"></a>');
}

$(document).ready(function () {
    $(".various").fancybox({ 
        modal: true,
        afterLoad: load
    });
});

お役に立てれば ：）

3
Mandeep Singh Bhangu

私は同じ「問題」に遭遇しました。これは私のために働いた：

$("#fancybox-overlay").unbind();
3
Gabriel

@Gabrielによってこの質問に対して与えられた$("#fancybox-overlay").unbind()ソリューションは、コンテンツのロード後にfancyboxにバインドする必要があり、すぐにバインドを解除できなかったことを除いて機能します。この問題に遭遇した人のために、次のコードは私のために問題を解決しました：

$('.fancybox').fancybox({'afterLoad' : function() {
    setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);}
});

400msの遅延でうまくいきました。 300msで動作しましたが、チャンスを逃したくありませんでした。

2
atwede

関数内でcloseClickパラメーターをfalseに設定します。

$(".video").click(function() {
    $.fancybox({
        width: 640,
        height: 385,
        helpers: { 
            overlay: {
                closeClick: false
            }
        }
    });

    return false;
});
2
T.Todua

これらの設定を適用することで、ファンシーボックスが閉じるのを防ぐことができます

 'showCloseButton'=>false, // hide close button from fancybox
 'hideOnOverlayClick'=>false, // outside of fancybox click disabled
 'enableEscapeButton'=>false, // disable close on escape key press

次のリンクからfancyboxの設定を取得します

http://www.fancybox.net/api

1
Kailas

関数に次の行を追加するだけで、jquery.fancybox-1.2.6.jsの内容を変更する必要はありません。

callbackOnStart : function() {$("#fancy_overlay").bind("click","null");},
1
Raj Gohil

上記のすべての回答にエラーが含まれているため、これらすべての回答を組み合わせて使用​​する必要がありました。確かに、ソースコードの編集は必要ありません。

私の場合、ファンシーボックス内に順番に表示される質問の進行があるため、ボックスを閉じるオーバーレイクリックを無効にしたかったので、ユーザーが誤ってオーバーレイをクリックして進行状況を失うことを望まなかったのですが、その機能をページの他の場所に保持します。

これを使用して無効にします。

$(".fancybox-overlay").unbind();

これを使用して再度有効にします。

$(".fancybox-overlay").bind("click", $.fancybox.close);
0
user2237993

次のコードを使用するだけです。

$(document).ready(function() {
  $("a#Mypopup").fancybox({
        "hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox
        "hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox
        "enableEscapeButton" : false  // prevents closing pressing ESCAPE key
  });
  $("a#Mypopup").trigger('click');
});

<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a>
0
Parul