4

Fancybox v2のajaxオプションを使用して、ヘルプや連絡先情報などの特定の情報を表示するサイトがあります。問題があることに気づきましたが、最初のクリックでは正常に機能しますが、通常は誤動作します。後続のクリック-実際のポップアップウィンドウが短時間表示されてから消えるか、まったく表示されない場合があり、オーバーレイが2〜3回読み込まれるため、数回クリックしてクリアすることができます。

同じリンクをクリックするか、Fancyboxを使用する別のリンクをクリックするかは関係ありません。Firebugコンソールはエラーを報告しません。ページを更新すると、信頼できるクリックが1回繰り返され、その後のクリックで再び奇妙な動作が見られます。

競合の原因となっているものがあるかどうかを確認するために、ページの1つを簡略化して作成しました（他のすべてのスクリプトを削除しました）が、そうではないようです。あなたはここでそれを見ることができます：

http://frontandback.com.au/fancytest/

サイトの右上にある3つのリンクには、Fancyboxが適用されています。例：

<ul>
    <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">Contact us</a></li>
    <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">Help</a></li>
    <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">FAQs</a></li>
</ul>

この奇妙な問題の原因について誰かが何か提案があれば、それは大いにありがたいです。

乾杯。

4

1 に答える 1

4

この投稿から、ajaxを介してファイルから部分的なコンテンツをロードできる改訂版を作成しました。

この新しいリビジョンでは、（HTML5）data-属性を使用しhashてURLのを渡すため、これを行う代わりに

<li><a href="index.html" data-fancybox-href="index.html #contact" target="_blank" class="fancybox fancybox.ajax">Contact us</a></li>

これを行います

<li><a href="index.html" data-segment="#contact" target="_blank" class="fancybox">Contact us</a></li>

...特別なfancyboxクラスを使用しておらず、コメントセクションで提案されているものでもないことに注意してください。 fancybox.ajaxfancybox.iframe

次に、基本的なスクリプト 

$(".fancybox").on("click", function() {
    targetContent = $("<div />").load(this.href +" "+ $(this).data("segment")); 
    $.fancybox(targetContent, {
        fitToView: false,
        autoSize : false,
        width: 420, // or whatever
        height: 280
    }); // fancybox
    return false; // prevent default
}); // on

属性<div>を介してリモートファイルからそれぞれに寸法を設定してから、およびオプションを設定および削除して動的サイズを取得できます。style=""autoSize : truewidthheight

もちろん、改訂されたデモ

于 2012-12-18T04:17:52.687 に答える