Question

我正在使用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");
            }
        }
    });
}

屏幕截图示例：

jQuery Dialog not Centered Example http://oi54.tinypic.com/nlznl4.jpg

Answer 1

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

$("#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"); 
        } 
      } 
  }); 
});

Answer 2

我发现使用特定的数值而不是“自动”高度和宽度选项可以更好地工作并始终居中。

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

Answer 3

我的解决方案与接受的答案类似。作为AJAX调用，内容不是动态的，而是在显示对话框之前立即分配了图像标记的src。即使在对话框中具有固定的宽度和高度，它也不会居中。

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

通过给它一个timeout，对话框似乎能够正确地了解其内容和位置。

jQuery UI对话框不居中

3 个答案: