Question

我有来自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，内容已关闭，但背景仍然很暗。我必须再次点击暗背景才能关闭不透明效果。所以，我尝试第三次打开相同的fancybox.ajax相同的链接，我的背景比第二次更暗。

顺便说一下。其他fancybox功能只有ajax功能才有问题。

Answer 1

（通过问题编辑回答。转换为社区维基回答。请参阅Question with no answers, but issue solved in the comments (or extended in chat)）

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.js并将脚本移至firstpage.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
    });
}

并用href取代onclick看起来像这样......

<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上进行测试

使用firefox和chrome浏览器的jQuery fancybox ajax功能问题

1 个答案: