Question

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

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

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

如果没有那么我怎样才能以编程方式增加对话框的高度和宽度，逐渐增加高度和宽度等效果，数据会出现在具有淡化效果的对话框中....如何实现它。需要一些代码的帮助。感谢

Answer 1

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

$('#yourDiv').animate({height: '400px', width: '200px'});

Answer 2

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

=== UPDATE ===

我的更新jsfiddle。

如何增加jquery对话框高度＆amp;宽度动态有一些影响

2 个答案: