jquery - 如何动态增加jquery对话框的高度和宽度并产生一定的效果

Question

当我显示对话框时，我的对话框高度为 100，宽度为 100，如

$("#dialog").dialog({
    autoOpen: true,
    height: 100,
    width: 100,
    modal: false,
    draggable: false,
    resizable: false,
});

并在后台加载数据，当数据完全加载时，因为 jquery ajax 有成功选项，从那里我们可以确定数据已加载，然后我会将这些数据显示到我的对话框中。假设我想在对话框中显示的数据需要更多空间，例如高度应该是 300，宽度应该是 300。那么当我将大数据放入对话框中时，对话框是否会自动调整大小？

如果没有，那么我如何以编程方式增加对话框的高度和宽度，一些效果，例如逐渐增加高度和宽度，并且数据将出现在带有淡入效果的对话框中......如何实现它。需要一些代码的帮助。谢谢

Answer 1

首先计算隐藏对话框元素的高度。在将宽度设置为 300px，但没有高度并添加类 ui-widget 之前。

HTML:

<div id="dialog" class="ui-widget">...

CSS:

#dialog {
    display: none;
    width: 300px;
}

JS(16px 是对话框填充):

var iHeight = $('#dialog').height() + 16;

创建对话框后，设置对话框包装的新宽度，如果当前高度低于计算值，则启动动画。

JS:

if ($("#dialog").height() < iHeight) {
    $("#dialog").parent().width(300 + 50);
    $("#dialog").animate({ height: iHeight, width: '300px'}, 500);
}

另请参阅我的jsfiddle .

===更新===

我更新了jsfiddle .