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，而不是这样做

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

Fancybox v2在第二次点击时失败

1 个答案: