0

私はfancybox.netのjQuery Fancybox 2プラグインを持っており、fancybox.ajaxを使用してデータベースから複数のリンクループIDレコードを作成しました。クラスは次のようになります...

<a class="ajaxbox" href="showproduct.php?id=1" title="Show Product">Show Product ID 1</a>
<a class="ajaxbox" href="showproduct.php?id=2" title="Show Product">Show Product ID 2</a>
<a class="ajaxbox" href="showproduct.php?id=3" title="Show Product">Show Product ID 3</a>

そして私のJavaScriptコード...

$(function(){
    $(".ajaxbox").fancybox({
        maxWidth : 900,
        maxHeight : 700,
        fitToView : false,
        autoSize     : true,
        openEffect : 'none',
        closeEffect : 'none',
        type : 'ajax'
    });
});

IE と Safari では問題なく動作しますが、Chrome と Firefox (14.0.1) では問題が発生しました。問題は、[X] ボタンをクリックすると、fancybox が閉じられますが、同じ fancybox.ajax を開くと、背景の不透明度が暗くなることです。ファンシーボックスをもう一度閉じようとしましたが、コンテンツは閉じられていますが、背景はまだ暗いです。不透明効果を閉じるには、暗い背景をもう一度クリックする必要があります。そのため、同じ fancybox.ajax の同じリンクを 3 回目にもう一度開こうとすると、2 回目よりも背景が暗くなります。

ところで。その他 fancybox 関数は問題ありません ajax 関数のみ。

4

1 に答える 1

0

(質問の編集によって回答。コミュニティ wiki の回答に変換。回答がない質問を参照してください。ただし、コメントで問題が解決されています (またはチャットで拡張)

OP は次のように書いています。

fancybox.ajax 関数で何が起こるかを見つけました。

最初の問題は、ファイル名を作成javascript.jsし、それをすべてのページに追加したことです (含まれているfirstpage.phpとshowproduct.php、このように...

<script type="text/javascript" src="javascript.js"></script>

そして、fancyboxスクリプトをに追加しましたjavascript.js

fancybox はと混同していると思うので、スクリプトをjavascript.js削除.ajaxboxして移動して、次のようにします。javascript.jsfirstpage.php

firstpage.php

<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript">
$(function(){
    $(".ajaxbox").fancybox({
        maxWidth : 900,
        maxHeight : 700,
        fitToView : false,
        autoSize     : true,
        openEffect : 'none',
        closeEffect : 'none',
        type : 'ajax'
    });
});
</script>

およびshowproduct.php (.ajaxbox機能なし)

<script type="text/javascript" src="javascript.js"></script>

もう一度テストしてください...わかりました。すべてが正常に戻ります。

しかし！すべてのページで同じ JavaScript 関数が機能する必要があります。だから、私はこのような新しい関数を作成し、それを元に戻しましたjavascript.js

function openajaxfancybox(url) {
    $.fancybox({
        maxWidth : 900,
        maxHeight : 700,
        fitToView : false,
        autoSize     : true,
        openEffect   : 'none',
        closeEffect : 'none',
        type : 'ajax',
        href : url
    });
}

onclick を href に置き換えると、次のようになります...

<a onclick="openajaxfancybox('showproduct.php?id=1');">Show Product ID 1</a>
<a onclick="openajaxfancybox('showproduct.php?id=2');">Show Product ID 2</a>
<a onclick="openajaxfancybox('showproduct.php?id=3');">Show Product ID 3</a>

今すぐもう一度テストしてください！私が望むように、すべてが問題なく完全に機能します。:)

PS: IE、Chrome、Firefox、Safari でテスト済み

于 2015-02-03T16:49:34.377 に答える