jQueryUI - AJAX 加载后调整对话框大小答案

【问题标题】：jQueryUI - Resize Dialog after AJAX LoadjQueryUI - AJAX 加载后调整对话框大小
【发布时间】：2013-04-09 20:43:32
【问题描述】：

我正在尝试编写一个快速插件，它将一些 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。我认为对话框本身正在设置大小限制。如何将其设置为加载内容的自然宽度？

编辑/添加： 它正在返回模态的默认大小。因为即使它包含更宽的内容（比如 500 像素的图像），父容器（mySelector）也可能不会那么宽（至少在 FF 中），所以它始终是默认值（300 - padding = 274）。有什么方法可以自动检测返回内容的宽度不会滚动？）

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

我以前也有同样的问题。如果我记得，您需要先加载对话框，然后再加载其中的内容。这样，对话框将自动调整其内容的大小（宽度=自动）。

更多这样的（测试）：

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);

【讨论】：

你的意思是加载内容然后初始化对话框？因为我正在创建对话框，然后当前加载内容。如果对话框有自动调整大小的方法，那就太好了，但我找不到类似的东西。
我更新并测试了代码。只需包含 JQuery-ui 和对话框文件。它有效 :) 这样做的一个优点是您可以更改 URL（即使对话框打开）并且它会自动调整大小。无需更多代码。
谢谢，这让我走上了正轨……关键是在您执行 $.get 后的回调中调用 open（在我的情况下也是如此）。由于其他一些要求，我的解决方案实际上会与您的解决方案略有不同......完成后我会在这里发布。再次感谢！

【解决方案2】：

他们的关键是在内容加载后再次调用 open，然后重新居中。这将导致对话框发挥它的魔力并正确调整所有内容并重新居中。等我整理好后，我会在这里发布一个插件。

【讨论】：

【解决方案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");
            }
        }
    });

诀窍是在“创建”处理程序中插入对话框内容。

【讨论】：