Fixed-position dialogs in jQuery UI

I’m working on a project where there is a long, scrolling page and I wanted to have a dialog that is draggable and resizeable that does not scroll away when the user scrolls down. As far as I could tell, there is no option to do this with jQuery UI’s dialog widget. But there is a quick workaround:

dialogDiv.dialog().parent().css('position', 'fixed');

I use the parent because the dialog widget wraps the content in another <div> that contains the content and the other elements of the dialog box (title bar, &c.).

UPDATE 6 Aug. 2011:

If the dialog box is resizeable, you also need to reset the position each time it is resized:

mapDiv.bind("dialogresize", function () {
    dialogDiv.parent().css('position', 'fixed');
});

• Css
• Dialog
• Javascript
• Jquery
• Jqueryui
• Wodget