Jquery dialog box not positions center screen

Question

I have a jquery dialog box that is mean't to position in the middle, however it seems slightly off center vertically. Here is the code:

$(\'#add_box\').dialog({
     autoOpen: true',
     width: 300,
     modal: true,
     resizable: false,
    bgiframe:true
});

Any ideas why this won't center?

Answer 1

If your viewport gets scrolled after the dialog displays, it will no longer be centered. It's possible to unintentionally cause the viewport to scroll by adding/removing content from the page. You can recenter the dialog window during scroll/resize events by calling:

$('my-selector').dialog('option', 'position', 'center');

Answer 2

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.

Answer 3

I noticed also that jquery.dimensions.js used for jquery.tooltip has the same decenter effect.