0

I have jQuery Fancybox 2 plugin from fancybox.net and I created a multiple links loop id records from database using fancybox.ajax as class look like this...

<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>

and my javascript code...

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

In IE and Safari it works great without any problems but I got a problem in Chrome and Firefox (14.0.1) The problem is when I click X button the fancybox is closed but when I open same fancybox.ajax again the backgroud opacity get darker and I try to close fancybox again the content is closed but the background is still dark. I have to click on the dark background again to close opacity effect. So, I try to open same fancybox.ajax same link again third time and I got background more darker than second time.

Btw. others fancybox function is ok only problem with ajax function.

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.js脚本firstpage.php看起来像这样。

第一页.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 上测试

于 2015-02-03T16:49:34.377 回答