Question

当有人点击按钮时，我正在尝试向Fancybox 2.0弹出窗口添加一些动态内容。我尝试了几件事，但我无法让它发挥作用。我总是得到一个“请求的内容无法加载”。错误。

我首先想要在单击按钮时加载json内容，然后打开包含内容的弹出窗口...

自重复以来更新的问题

我有什么：

HTML

<a href="#quick_cart" class="opener cart" id="productid_1234" data-fancybox-href=" url-to-product">Add to cart</a>

Jquery的

$(document).ready(function() {

          $('.opener').click(function(e){
            e.preventDefault();

            var url = $(this).data('fancybox-href') + '/?format=json';
            console.log(url);

            $.fancybox({
              type: 'inline',
              beforeLoad: function (){
                quick_cart(url);
              }
            });
          });
        });
        function quick_cart(url){

          $.getJSON(url, function (data){

            $('#quick_cart').append('<div>' + data.product.title + '</div>');

          });    
        }

脚本为json内容加载正确的url并填充隐藏的div #quick_cart。但问题是我收到错误“无法加载请求的内容”。我无法弄清楚为什么......

可以是“type：inline”不对吗？我尝试了几件事甚至删除了那条线但没有运气。当我删除该行时，弹出窗口不会显示。

我做错了什么？任何帮助非常感谢。

Answer 1

好吧，我真的拔掉了所有的头发。所以，在这里帮助别人的解决方案：

代码不知道将函数quick_cart中生成的HTML放在何处。因此，fancybox代码的简单href属性就足够了。像这样：

$.fancybox({
   type: 'inline',
   beforeLoad: function (){
     quick_cart(url);
   },
   href: 'quick_cart'
 });

希望这可以帮助某人;）

具有动态json内容的Fancybox 2

1 个答案: