Fancybox v2在第二次点击时失败

Question

我有一个网站，使用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>

如果有人对什么导致这个奇怪的问题有任何建议，将不胜感激。

干杯。

Answer 1

在这篇文章中，我创建了一个修订版本，您可以通过ajax从文件加载部分内容。

这个新版本使用（HTML5） data-属性来传递URL的hash ，而不是这样做

<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

您可以通过style=""属性从远程文件为每个<div>设置维度，然后设置autoSize : true并删除width和height选项以获得动态大小。

当然， 修改后的DEMO