jQuery - Dialog自动调整动态内容的大小并保持中心位置

Question

我有一个jQuery对话框,我正在使用Ajax加载内容.

Dialog最初位于页面的中心.这里的问题是,由于它是动态内容,因此数据的大小是未知的.因此,当我获得大数据时,对话框仅在底部增长,即对话框在底部展开,顶部仍处于相同位置.

我想要的是

加载数据时,对话框应在方向(顶部和底部)上展开,以便内容在不滚动的情况下可见.

Answer 1

当我在寻找解决方案时,我在互联网上找到的答案都没有让我满意.即便是这个也没有.在阅读了很多关于JQuery API文档的内容之后,我发现了一些非常有趣的东西.正如此网页所描述的那样,您可以绑定一个事件,在该事件中,在ajax请求完成其工作之后将执行该事件.事情是,这并不简单; 当我在进行自己的测试时,使用API​​文档中提供的示例,我无法使其工作.看起来我的JQuery对话框不是以"未来"的上下文方式存在的.

这使我进入了这个描述的页面: 为现在和将来匹配当前选择器的所有元素附加一个事件处理程序.找到这个导致我创建一个像这样的函数:

$(document).live("ajaxStop", function (e) {
      $(".myDiagDiv").dialog("option", "position", "center");
});

瞧!它就像一个魅力!完成ajax请求后,position属性将被更改并适应div的内容及其维度!

希望它能在未来帮助人们!

编辑:您可能希望使用函数".on()"而不是".live()".从我写答案的时候开始,似乎函数".live()"已经在jQuery的1.9版本中删除,并被新的替换.对于jQuery> = 1.9的用户来说,更合适的解决方案是这样的:

$(document).on("ajaxStop", function (e) {
      $(".myDiagDiv").dialog("option", "position", "center");
});

Answer 2

默认对话框是绝对相对定位的。

对话框可能会在提供自动高度时展开，但是当页面滚动时，对话框会重新定位自身。

执行此操作的唯一方法是将这些样式应用到对话框

1. 将对话框定位在窗口中

   position : ['center',<distance from top>]

2. 使用css样式固定位置

   .fixed-dialog { position:"fixed" }

3. 将此类添加到对话框中

   dialogClass : 'fixed-dialog'

所以，对话框看起来像

$('#dialog-div').dialog({
        position : ['center',10],
        dialogClass: "fixed-dialog"
    });