jQuery UI Dialog positioning

Question

Basically I would like the dialog to remain in the same position on the page, even when changing the window size or switching to full screen window.

How can I always have the dialog positioned in relation to the site container div, rather than the window?

For example, my site container div is 960px wide and is centered on the page. I want the dialog to always appear at the same position within that container even when I resize the window.

Answer 1

Track the resize window event and do the adjustment you need..

$(window).resize
(
    function()
    {
       $(myDialogSelector)[0].position().top = $(myDivSelector).position().top;
       $(myDialogSelector)[0].position().left = $(myDivSelector).position().left;
    }
);

That's the idea.