4

我有一个网站，它使用 Fancybox v2 的 ajax 选项来显示某些信息，例如帮助、联系信息等。我注意到它有一个问题，但是，它在第​​一次点击时工作正常，但通常在随后的点击 - 实际的弹出窗口可能会短暂出现然后消失，或者它可能根本不会出现，并且覆盖可能会加载两到三次，因此需要多次点击才能清除它。

无论您单击同一个链接还是另一个也使用 Fancybox 的链接都没有关系。Firebug 控制台不报告任何错误。如果您刷新页面，您将获得另一个可靠的点击，然后随后的点击再次表现出奇怪的行为。

我已经创建了我们其中一个页面的精简版本（删除所有其他脚本），以查看是否存在导致冲突的原因，但似乎并非如此。你可以在这里看看：

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

网站右上角的三个链接应用了 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-属性来传递hashURL，所以不是这样做

<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.ajax，也没有fancybox.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

当然，修改后的DEMO

于 2012-12-18T04:17:52.687 回答