jQuery UI 对话框未居中答案

【问题标题】：jQuery UI Dialog not CenteredjQuery UI 对话框未居中
【发布时间】：2011-10-06 20:43:47
【问题描述】：

我正在使用 jQuery 并将内容加载到 div 中，然后将其显示为对话框。但是，它没有使对话框居中。

有人有解决办法吗？

代码：

function Core_Load_Register()
{
    $("body").append("<div id='Register_Popup'></div>");
    $("#Register_Popup").load("index.php?section=FrontPage&page=Register&nogui=true");
    $("#Register_Popup").dialog({
        modal: true,
        height: "auto",
        width: "auto",
        buttons: 
        {
            "Register New Account":
            function() 
            {
                
            },
            
            "Cancel":
            function()
            {
                $(this).dialog("close");
            }
        }
    });
}

示例截图：

【问题讨论】：

尝试这样做：stackoverflow.com/questions/1467102/…
试过但对我不起作用。
我不确定您的对话框代码在 DOM 中的位置，但我会尝试将其作为 </body> 之前的最后一个元素。
为了它的价值，我将 jQuery UI 更新到了最新版本，它神奇地自我修复了。

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

由于您的内容是动态的，请尝试先等待加载命令完成。

$("#Register_Popup")
  .load("index.php?section=FrontPage&page=Register&nogui=true", 
  function()
  {
    $("#Register_Popup").dialog({ 
      modal: true, 
      height: "auto", 
      width: "auto", 
      buttons:  
      { 
        "Register New Account": 
        function()  
        { 

        }, 

        "Cancel": 
        function() 
        { 
            $(this).dialog("close"); 
        } 
      } 
  }); 
});

【讨论】：

位置默认居中。但即便如此，我尝试定义它，它仍然没有工作。问题是我正在加载使其偏离中心的内容。
根据您的评论更新答案。

【解决方案2】：

我发现使用特定数值而不是“自动”高度和宽度选项效果更好，并且始终居中。

这并不总是最佳的，尤其是在对话框中使用动态数据时。但它对我有用（使用 jquery ui 1.9.2）。

【讨论】：

【解决方案3】：

我的解决方案类似于接受的答案。就 AJAX 调用而言，内容不是动态的，而是在显示对话框之前立即分配了图像标签的 src。即使对话框的宽度和高度固定，它也无法居中。

setTimeout(function() {
            img.dialog({
                draggable: true,
                height: 'auto',
                width: 'auto',
                maxHeight: '768',
                maxWidth: '1024',
                modal: true
            });
        }, 500 );

通过给它一个timeout，对话框似乎能够知道它的内容并正确定位自己。

【讨论】：