jQuery – Dialog自动调整动态内容大小并保持中心位置
我有一个jQuery对话框，我正在使用Ajax加载内容。
Dialog最初位于页面的中心。 这里的问题是，由于它是动态内容，因此数据的大小是未知的。 因此，当我获得大数据时，对话框仅在底部增长，即对话框在底部展开，顶部仍处于相同位置。
我想要的是
加载数据时，对话框应在方向（顶部和底部）上展开，以便内容在不滚动的情况下可见。
当我在寻找解决方案时，我在互联网上找到的答案都没有让我满意。 即便是这个也没有。 在阅读了很多关于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"); });
默认对话框绝对相对定位。
对话框可以在给出自动高度时展开，但是当滚动页面时，对话框将自动重新定位。
唯一的方法是将这些样式应用于对话框
-
将对话框放在Window by中
position : ['center',] -
使用css样式修复位置
.fixed-dialog { position:"fixed" } -
将此类添加到对话框中
dialogClass : 'fixed-dialog'
所以，对话框看起来像
$('#dialog-div').dialog({ position : ['center',10], dialogClass: "fixed-dialog" });
Use this modal: true, width: '80%', autoResize:true, resizable: true, position: { my: "center top", at: "center top", of: window }
订单必须相同
我用那个函数：
function centerDialog(id){ var d = $('#'+id).closest('.ui-dialog'), w = $(window); d.css({ 'top':(w.height()-d.outerHeight())/2, 'left':(w.width()-d.outerWidth())/2 }); }
在将对话框内容移动到ajax源之前定位很好，之后定位是个问题。 以下为我今天工作。
$('#formdialog').dialog({autoOpen: false, modal: true, title:'Dialog Title', position: { my: "center top", at: "center top+50", of: window }});
请注意，’+ 50’是“从顶部向下50px”并且无论是添加到“我的”还是“在”行都有效。 空间不允许。 例如：“中心顶部+50”将不起作用。
在文档选项位置中查看更多信息