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

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

Answer 3

有点晚了，但这是我的工作解决方案：

$("#dialog" ).dialog({
        autoOpen: false,
        modal: true,
        width: 'auto',
        height: 'auto',

        create: function(){
                var content = '<h1>This is some Content</h1>';
                $('.content', this).replaceWith(content);

        buttons: {
            Ok: function(){
                    $(this).dialog("close");
            }
        }
    });

诀窍是在'create'处理程序中插入对话框内容。

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

3 个答案: