jQueryUI - 在AJAX加载后调整对话框

Question

我正在尝试编写一个快速插件,将一些AJAX内容加载到jQuery UI对话框中,并相应地调整对话框的大小和居中.以下是它的作用要点:

$(mySelector).html('Loading...').load(options.url, function() {

    element = $(mySelector);

    element.dialog('option', 'height', element.height() + 50);
    element.dialog('option', 'width', element.width());
    element.dialog('option', 'position', 'center');

});

高度似乎没问题(添加一些填充对话框添加)但宽度总是274无论如何.我认为对话框本身正在设置它的大小限制.如何将其设置为加载内容的自然宽度？

编辑/添加: 它返回模态的默认大小.因为即使它包含更宽的内容(例如500px图像),父容器(mySelector)也可能不那么宽(至少在FF中),因此它始终是默认值(300 - padding = 274).是否有任何方法可以自动检测返回内容的宽度是否最小而不滚动？)

Answer 1

我曾经有过同样的问题.如果我记得,您需要先加载对话框然后加载其中的内容.这样,对话框将自动调整其内容大小(width = auto).

更像是这样(测试过):

var $dialog; //Must be at the global scope
function dialog(url) {
    $dialog.dialog("option", "width", "auto");
    $dialog.dialog("option", "height", "auto");
    $.get(url,{},function(html) {
        $dialog.html(html);
        $dialog.dialog("open");
    });
}

$(function() {
    //Initialize (without showing it)
    var $dialog = $('<div id="dialog" title=""></div>').dialog({
        autoOpen: false,
        modal: true
    });
});

然后你可以这样做:

dialog(someURL);

Answer 2

他们的关键是在内容加载后再次打开,然后重新居中.这将使对话框发挥作用,并正确调整所有内容并重新定位.一旦我清理它,我会在这里发布一个插件.