jQuery UI Dialog not Centered

Question

I am using jQuery and I am loading content into a div, then displaying it as a dialog. However, it is not centering the dialog.

Does anyone have a solution?

Code:

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

Example Screenshot:

try doing this : http://stackoverflow.com/questions/1467102/dialog-box-not-positions-center-screen — Keith.Abramo, Oct 06 '11 at 20:47
I'm not sure where your dialog code sits in your DOM, but I would try putting it as the last element before `
`. — Allen Liu, Oct 06 '11 at 22:24
For what it's worth, I updated jQuery UI to the latest version and it magically fixed itself. — HaL, Sep 21 '12 at 23:37

Erik Philips · Accepted Answer · 2011-10-06T22:03:10.780

9

Since your content is dynamic try waiting for the load command to finish first.

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

edited Oct 06 '11 at 22:03

answered Oct 06 '11 at 20:57

Erik Philips

53,428
11
128
150

The position is centered by default. But even so, I tried defining it and it still didn't work. The issue is I am loading content which puts it off center. – Marcus Krueger Oct 06 '11 at 21:28
Updated Answer per your comment. – Erik Philips Oct 06 '11 at 22:01

score 2 · Answer 2 · answered Dec 30 '12 at 07:26

I found that using specific numeric values rather than the 'auto' height and width option works a lot better and always centers.

This isn't always optimal, especially when using dynamic data in the dialog.. but it worked for me (using jquery ui 1.9.2).

score 0 · Answer 3 · answered May 21 '15 at 20:05

My solution was similar to the accepted answer. Content was not dynamic in the sense of it being an AJAX call, rather the src of an image tag was assigned immediately before showing the dialog. Even with fixed width and height on the dialog it would fail to center.

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

By giving it a timeout it seems the dialog was able to be aware of its content and position itself correctly.

jQuery UI Dialog not Centered

3 Answers3