8

这个场景：

用户将他的 zip 插入到输入字段中，当点击魔法按钮时，他可以看到离他最近的商店。我称该服务非常好，并加载了一些 AJAX 优点。一切都很好。

现在，我不想将结果插入页面上的某个位置，而是希望它显示在 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)。

4

9 回答 9

15

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

$('#button').on('click', function(){
    $.fancybox({
        width: 400,
        height: 400,
        autoSize: false,
        href: '/some/url-to-load',
        type: 'ajax'
    });
});
于 2013-04-12T06:25:30.957 回答
11

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

$("#button").click(function() {
    $.fancybox.open({
        href: "ajax.php",
        type: "ajax",
        ajax: {
            type: "POST",
            data: {
                temp: "tada"
            }
        }
    });
});
于 2014-09-06T17:11:40.010 回答
9

如果要将 url 加载为 ajax，则必须设置 type -

$.fancybox({
  href : nzData,
  type : 'ajax'
});
于 2012-05-02T09:07:29.650 回答
4

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

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

     $('#foo').load(nzData, function(){
       var foo = $('#foo').html(); 
       $.fancybox(foo);
    });

});

我承认这不是很漂亮，但这是我让它工作的唯一方法。今天早上我与另一位开发人员交谈，他在类似问题中采用了相同的解决方案。

不过，必须有更好的解决方案。如果有人知道，我很想听听！

于 2012-05-02T09:51:08.283 回答
2

我有兴趣做同样的事情。我找到了一个类似的解决方案，但是它与这里推荐的任何其他解决方案都不同。查看这两个 API 的文档后，这应该在 V1 或 V2 中工作。

$('#button').on('click', function(){    
    $('#foo').load('/content.html', function(){

        var $source = $(this);

        $.fancybox({
            content: $source,
            width: 550,
            title: 'Your Title',
            etc...
        });
    });
});

然后，您的数据容器。

<div id="foo" style="display: none;"></div>
于 2015-02-16T09:44:06.453 回答
1

尝试：

$.fancybox({
  type: 'ajax',
  ajax: { 
     url: nzData
    }
});
于 2012-05-01T20:18:52.440 回答
0

如果您想要nzData在fancybox中显示，请使用

$.fancybox(nzData,{
 // fancybox options
});
于 2012-05-01T23:03:28.373 回答
0

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

<a href="mypage.html #my_id" class="fancybox fancybox.ajax">Load ajax</a>
$(".fancybox").fancybox();
于 2014-10-27T21:42:51.077 回答
-1

我是这样做的：

你需要三个元素：

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

2）#fancylink 是一个隐藏<a>的带有 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');
    }
});

希望这可以帮助某人

于 2015-06-15T14:25:13.447 回答