将动态AJAX内容加载到Fancybox中

这种情况：

用户将他的zip插入到输入字段中，当单击魔术按钮时，他可以看到最接近其位置的商店。 我称这项服务非常好，并加入了一些AJAX-goodness。 一切都很好。

现在，我希望它显示在Fancybox中，而不是在页面上的某处插入结果。 我根本无法做到这一点。

JavaScript的：

$('#button').on('click', function(){ // Function to build the URL edited out for simplicity var nzData = '/url.com?Zip=8000 #module'; $.fancybox({ ajax: { data: nzData } }); }); 

我希望弹出Fancybox并向我显示URL（ nzData ）的标记。 Fancybox加载，但不是内容，我得到一个字符串说“ 无法加载请求的内容。请稍后再试。 ”。

这不是服务的问题，所以我怀疑这只是我忽视某些东西或强奸Fancybox API。 那么，我做错了什么？

编辑：我忘了提，我使用旧版本的Fancybox（v1.3.4）。

Answer 1

我知道这是一个老问题，但我最近不得不处理类似的问题。 这是我将ajax加载到fancybox中所做的。

 $('#button').on('click', function(){ $.fancybox({ width: 400, height: 400, autoSize: false, href: '/some/url-to-load', type: 'ajax' }); }); 

Answer 2

fancybox使用参数“ajax”，您可以在其中传递您的配置（由jquery描述）

 $("#button").click(function() { $.fancybox.open({ href: "ajax.php", type: "ajax", ajax: { type: "POST", data: { temp: "tada" } } }); }); 

Answer 3

如果你想加载url作为ajax，你必须设置类型 –

 $.fancybox({ href : nzData, type : 'ajax' }); 

Answer 4

我最终将内容加载到页面上的隐藏容器中，然后在Fancybox中显示该内容。

 $('#button').on('click', function(){ var nzData = '/url.com?Zip=8000 #module'; $('#foo').load(nzData, function(){ var foo = $('#foo').html(); $.fancybox(foo); }); }); 

我承认，这不是很漂亮，但这是我能让它发挥作用的唯一方式。 我今天早上与另一位开发人员交谈过，他在同样的问题上使用了相同的解决方案。

但是，必须有一个更好的解决方案。 如果有人知道，我很乐意听到它！

Answer 5

我有兴趣做同样的事情。 我找到了类似的解决方案，但它与此处推荐的任何其他解决方案不同。 查看两个API的文档后，这应该适用于V1或V2。

 $('#button').on('click', function(){ $('#foo').load('/content.html', function(){ var $source = $(this); $.fancybox({ content: $source, width: 550, title: 'Your Title', etc... }); }); }); 

然后，您的数据容器。

Answer 6

尝试：

 $.fancybox({ type: 'ajax', ajax: { url: nzData } }); 

Answer 7

如果你想要的是在fancybox中显示nzData ，那么使用

 $.fancybox(nzData,{ // fancybox options }); 

Answer 8

https://stackoverflow.com/a/10546683/955745

 Load ajax $(".fancybox").fancybox(); 

Answer 9

这就是我做的方式：

你需要三个要素：

1）你需要一个div作为fancybox的容器，我们称之为#fancycontainer

2）#fancylink是一个隐藏的带有href到fancybox div（在这种情况下是href="#fancycontainer" ）

3）#button是可加载所有内容的可点击元素。

在onload函数中添加以下代码：

 $('#fancynlink').fancybox(); $('#button').click(function(){ $.ajax({ //OPTIONS... //.......... success: function(data){ //Here goes the code that fills the fancybox div $('#fancycontainer').append(blablabla.....); //And this launches the fancybox after everything has loaded $('#fancylink').trigger('click'); } }); 

希望这有助于某人