Question

全部，我正在尝试将一些内容加载到fancybox中。我想用AJAX加载一些页面内容。如何使用AJAX和1.3版将此内容加载到我的fancybox中？

谢谢！

Answer 1

要通过单击链接将AJAX内容加载到FancyBox，您可以使用以下方法，直接从FancyBox示例（http://fancybox.net/howto）中获取：

<a class="various" href="/demo/ajax.php">Ajax</a>

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

请注意，此功能非常完美，但如果您想为精美框指定其他参数，则可以执行以下操作：

 $(document).ready(function() {
    $(".various").fancybox({
        hideOnOverlayClick:false,
        hideOnContentClick:false,
        ....,
    });
});

有关其他参数，请参阅fancybox文档。

您始终可以使用href选项（http://fancybox.net/api）在JavaScript中指定href。

更新：我看到您正在使用1.3.4，因此链接已相应更新。

更新：如果要更新到FancyBox 2，可以使用FancyBox网站（http://fancyapps.com/fancybox/#examples）中的以下示例：

<a class="various fancybox.ajax" href="/demo/ajax.php">Ajax</a>

$(document).ready(function() {
    $(".various").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});

Answer 2

刚从http://fancybox.net/使用1.3

$("#Link").fancybox({
    ajax : {
        type    : "POST",
        data    : 'mydata=test'
    }
});

Answer 3

function test_function(){

     $.fancybox({
        'scrolling'         : 'no',
        'padding'           : 0,
        'centerOnScroll'    : true,
        'href'              : 'faq.php',
        'type'              : 'ajax'
     });
}

使用AJAX和Fancybox 1.3加载内容

3 个答案: