Fancybox链接显示另一个Fancybox

Fancybox link to display another fancybox

本文关键字：Fancybox 另一个 链接 显示      更新时间：2023-09-26

有时在一个fancybox中有一个链接来启动另一个fancy box（或加载当前fancy box中的内容）是有意义的。

比方说，您在登录时收到一条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
  });

实现这一目标的正确方法是什么？

这就是我在项目中解决这个问题的方法：

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

通过这种方式，您可以使用.fancybox类将fancybox添加到任何当前和未来的A元素中，这样您就不必在打开fancybox后定义新的事件。

版本2已经在使用"live"，因此使用类名-`$（".fancybox"）.fancybok（）；'-也适用于使用ajax 加载的元素

您应该告诉元素从插件中打开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();
});

这应该就是你所需要的。

相关文章：