7

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

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

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

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

4

2 回答 2

5

首先计算隐藏对话框元素的高度。在将宽度设置为 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。

于 2011-10-26T18:45:21.090 回答
4

如果您知道高度/宽度或可以以某种方式计算它，那么您可以使用http://api.jquery.com/animate/

$('#yourDiv').animate({height: '400px', width: '200px'});
于 2011-10-26T18:06:43.880 回答