Can I center a jQuery UI dialog to a div?

Question

I've got a main content div, and I'd like to centre the dialog to that div, rather than to the page. Any ideas? I know there's a position utility, but I can't work out how to use it with the dialog position options.

Answer 1

You're correct, .position() is the way to go here, like this:

​$("#dialog").dialog()
            .parent() //remember .dialog() wraps the content in another <div>
            .position({ my: 'center', at: 'center', of: '#parent' });
  //or just .position({ of: '#parent' });

​ In the above #parent it the parent element selector, you can give it a try here. You want the my and at properties to be center so they're centered op top of one another, then the of selector is the parent selector you want it centered in.

I specified all relevant options for illustration, but since center is the default for my and at, you can specify just the of like I have in the commented line above.