Fancybox链接以显示另一个fancybox

Question

有时，在一个花式框内有一个链接来启动另一个花式框（或在当前框内加载内容）很有意义。

假设您在登录时出现了fancybox错误消息。 您还可以通过fancybox使用“通过电子邮件发送我的密码”小部件。 您可能想将两者结合起来（在fancybox中）：

Bad password!
<a href="#forgot-password">Forgot my password!</a>

不幸的是，这是行不通的。 我考虑添加以下js：

  $('#fancybox-content a').live('click', function(){
      $(this).fancybox();
  });

令人惊讶的是，这种工作方式是：您必须单击两次链接，然后正确的事情发生了。 啊。

最终，我发现了一个骇人的丑陋变通方法（它起作用了！）：

  $('#fancybox-content a').live('click', function(){

    var href = $(this).attr('href');  //assume there is a selector inside href
    $.fancybox($(href).html());       //find the html manually and load
  });

什么是完成此任务的正确方法？

Answer 1

这就是我在项目中解决此问题的方式：

$('a.fancybox').live("click",function(event) {
   event.preventDefault();
   var href = $(this).attr('href');
   $.fancybox({href: href}) 
});

通过这种方式，您可以将fancybox添加到任何具有.fancybox类的当前将来的A元素中，因此在打开fancybox之后不必定义新的事件。

Answer 2

版本2已经使用“实时”，因此使用类名-`$（“。fancybox”）。fancybox（）;' -也适用于使用ajax加载的元素

Answer 3

您应该告诉元素从插件中打开Fancybox。

在某个地方，您具有以下内容->

$(document).ready(function(){
  $("#my_element").fancybox();
});

这是打开Fancybox的非常基本的功能，不仅如此，而且还会根据元素的href打开什么。 您不需要在这里做任何腿部工作。

所以，如果你有->

<a href="#forgot-password">Forgot my password!</a>

为简单起见，只需添加一个ID，例如'x'->

<a id="x" href="#forgot-password">Forgot my password!</a>

然后，为此元素启用Fancybox插件。

$(document).ready(function(){
  $("#my_element").fancybox();

  //this is for our new container to fire
  $("#x").fancybox();
});

那应该是您所需要的。