Question

我正在使用fancybox，当盒子加载时，我需要将一些项目插入到框内的无序列表（ul）中。问题是，当我插入项目时，内容大于框本身，所以我需要在内容更新后调整框的大小。我无法使用$ .fancybox.resize（）。如何在添加新内容时调整框的大小？

jQuery的：

$("a#OpenPopup").fancybox({ 'onStart': function () { loadContent(); } });

function loadContent(type) {
    var items = "<li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li>"; //This items I load with an ajax call
    $("#Popup u").html(items);
    $.fancybox.resize(); //This doesn't resize
}

html和css：

<a href="#Popup" id="OpenPopup">
<div style="display:none">
    <div id="Popup">
        <h1>Content</h1>
        <ul></ul>
    </div>
</div>

#Popup
{
    text-align: left;
    width: 400px;
}

Answer 1

我会使用fancybox提供的ajax机制来加载内容。您正在调用“onStart”，这是在“ajax”事件加载内容之前调用的事件。

使用“ajax”处理程序加载内容并在“onComplete”事件处理程序中调用$ .fancybox.resize（）。

我还发现编辑fancybox源代码使用jquery的animate代替css direct会使调整大小过渡变得平滑

        //wrap.css({height: h + (currentOpts.padding * 2) + titleh});
    //inner.css({height:    h});

    wrap.animate({
        height: h + (currentOpts.padding * 2) + titleh
    }, 100);

    inner.animate({
        height: h
    }, 100);

http://fancybox.net/api

Answer 2

Trufa发布的链接在其中一条评论中说，调整大小问题的修复程序是在fancybox 1.3.4中实现的。因此，将fancybox.js更新为最新版本可能会解决问题。

使用动态内容调整fancybox的大小

2 个答案: