将未知高度的jQuery UI对话框居中 – 是否可能？

有没有办法让jQuery对话框在可见窗口的中心打开，如果它的高度未知？

我有一个对话框，打开一个未知高度的动态加载forms。 第一次打开时，它会稍微向屏幕底部偏移。 当我关闭它并再次打开它时，似乎正确计算了顶部偏移量。

我不能提前知道内容的高度，所以这对我来说是一个问题。

编辑：这是一个示例代码

我有两个页面 – 一个是实例化对话框的对话框容器，另一个是对话框内容。 单击链接时，它的href将用作对话框的目标页面。

$(document).ready(function(){ $(a).click(function(){ $("#dialog").load($(this).attr('href')) .dialog({ modal: true, width: 400 }); $("#dialog").dialog('open'); }); }); 

Answer 1

您需要指定高度：’auto’以根据内容调整对话框。

 .dialog({ height: 'auto', }); 

@ jon3laze“position”的默认值是’center’，因此无需在open回调函数中设置它。

@eagerMoose没有必要打电话给

 $("#dialog").dialog('open'); 

因为对话框有一个autoOpen选项，默认为true，实例化后立即打开对话框。 第二次调用.dialog（’open’）被忽略。

编辑：因为加载是异步的，对话框可能在加载内容之前初始化。 尝试在加载完成时初始化对话框。

 $(document).ready(function(){ $(a).click(function(){ $("#dialog").load($(this).attr('href'), function(){ $(this).dialog({ modal: true, width: 400 }); }); }); }); 

Answer 2

您可以在使用height属性设置对话框之前获取高度

$（窗口）.height（）; //返回浏览器视口的高度

的$（document）.height（）; //返回HTML文档的高度

 $(document).ready(function(){ var h = $(document).height(); $(a).click(function(){ $("#dialog").load($(this).attr('href')) .dialog({ modal: true, width: 400, height: h }).dialog('open'); }); }); 

此外，您可以将.dialog('open')到通话结束。

这里的例子http://jsfiddle.net/BZpPH/1/

UPDATE

问题听起来像内容的位置。 您可以使用open事件选项让它在打开时重置大小。 我无法让这个工作在jsfiddle，因为我无法弄清楚如何使.load()方法工作。 然而，我在我自己的服务器上尝试了这个，默认位置到顶部，它将打开屏幕的中心。

 $(a).click(function() { $('#dialog').load($(this).attr('href')) .dialog({ modal: true, width: 400, height: 'auto', open: function() { $(this).dialog('option', 'position', 'center'); } }); }); }); 

Answer 3

罪魁祸首是.load（）函数。 这是一个ajax调用，意味着.dialog（）函数在实际加载内容之前被调用，因此内容高度实际上是猜测。

我设法通过在.load（）函数中定义对话框及其操作来解决问题，就像这样

 $(document).ready(function(){ $(a).click(function(){ $("#dialog").load($(this).attr('href'), function(){ $(this).dialog({ modal: true, width: 400 }); }); }); });