Fancybox v2第二次点击失败

我有一个网站使用Fancybox v2的ajax选项来显示某些信息，比如帮助，联系信息等等。我注意到它有一个问题，但是，它在哪里工作第一次点击就很好，但通常会对随后的点击产生不利影响 - 实际弹出窗口可能会短暂出现然后消失，或者根本不会出现，并且叠加层可能会加载两到三次，因此需要几次点击才能清除它。Fancybox v2第二次点击失败

不管你是否点击同样的链接或另一个也使用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>

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

干杯。

来源

2012-12-17 Seona

对于您的每三个环节，我认为这是对HASHTAG一个空白的问题？你可以测试和更改'data-fancybox-href =“index.html #main”'到'data-fancybox-href =“index.html＃main”'。同样的问题在这里：'href =“legals.aspx #main”' – arttronics

你试图从你内部加载相同的页面正在加载fancybox，因此它进入一个循环尝试重新加载jQuery和fancybox脚本（检查你的控制台） ...尝试加载一个分离的页面，而不是....或如果内容是在同一页面内，请使用类型：'inline'而不是ajax – JFK

感谢您的反馈人。一些进一步的评论： @JFK：这只是为了这个例子的目的。真正的网站（目前在我们公司的防火墙后面，所以我不能指出人们）将链接发送到不同的页面，并发生相同的错误。然而，这可能有好处，因为链接到的页面上也有脚本。不知道这是什么方法。 – Seona

从this post我创建了一个修订版本，您可以通过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选项来获得一个动态的大小。

当然，revised DEMO

来源

2012-12-18 04:17:52 JFK

** + 1 **优秀的答案！ – arttronics

太棒了，谢谢@JFK。可悲的是，我还没有享受这一点的声誉。但你摇滚。：d – Seona

Fancybox v2第二次点击失败

回答

相关问题