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

来自this post 我创建了一个修订版本，您可以在其中通过 ajax 从文件加载部分内容。

此新版本使用 (HTML5) data-属性传递 hash URL 的所以而不是这样做

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

...注意我们没有使用任何特殊的 fancyboxclass 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 : true并删除 width和height获取动态大小的选项。

当然，revised DEMO