jQuery UI dialog box not positioned center screen jQuery UI dialog box not positioned center screen jquery jquery

jQuery UI dialog box not positioned center screen


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');


Are you adding jquery.ui.position.js to your page? I had the same problem, checked the source code here and realized I didn't add that js to my page, after that.. dialog magically centered.


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