jQuery UI dialog box not positioned center screen

Question

I have a jQuery dialog box that is meant to position in the middle of the screen. However, it seems slightly off-center vertically.

Here is the code:

Answer 1

Digging up an old grave here but for new Google searchers.

You can maintain the position of the model window when the users scrolls by adding this event to your dialog. This will change it from absolutely positioned to fixed. No need to monitor scrolling events.

open: function(event, ui) {
    $(this).parent().css('position', 'fixed');
}

Answer 2

For me jquery.dimensions.js was the Culprit

Answer 3

I was facing the same issue of having the dialog not opening centered and scrolling my page to the top. The tag that I'm using to open the dialog is an anchor tag:

<a href="#">View More</a>

The pound symbol was causing the issue for me. All I did was modify the href in the anchor like so:

<a href="javascript:{}">View More</a>

Now my page is happy and centering the dialogs.

Answer 4

To fix this issue I made sure my body height was set to 100%.

body { height:100% }

This also maintains the center position while the user scrolls.

Answer 5

I was upgrading a legacy instance of jQuery UI and found that there was an extension to the dialog widget and it was simply using "center" instead of the position object. Implementing the position object or removing the parameter entirely worked for me (because center is the default).

Answer 6

1.) The jQuery dialog centers in whatever element you put it in.

Without more information, my guess is that you have a body div with a margin or something of the like. Move the popup div to the body level, and you'll be good to go.

2.) If you dynamically add content to the div as you load it, centering will NOT be correct. Do NOT display the div until you have the data your'e putting in it.