Positioning jQuery dialog

This keeps dialog div in fixed position

this works for me in IE FF chrome and safari

jQuery("#dialogDiv").dialog({    autoOpen: false,     draggable: true,    resizable: false,    height: 'auto',    width: 500,    modal: false,    open: function(event, ui) {        $(event.target).parent().css('position', 'fixed');        $(event.target).parent().css('top', '5px');        $(event.target).parent().css('left', '10px');    }});

when you want dialog box open just call

$('#dialogDiv').dialog('open');

If you make your dialog box's position:absolute, then its taken about of the regular page flow, and you can use the left and top property to place it anywhere on the page.

$('.selector').dialog({ dialogClass: 'myPosition' });

and define the myPosition css class as:

.myPosition {    position: absolute;    right: 200px; /* use a length or percentage */}

You can set the top, left, right, and bottom properties for myPosition using either a length such as in pixels or percentage.

Most of these answers seemed to be workarounds to me, and I wanted to find the official jQuery way to do it. After reading through the .position() docs, I found that it can indeed be done in the initialization of the jQuery widget:

$("#dialog").dialog({    title:title,    position:{my:"right top",at:"right+100 top+100", of:"body"},    width:width,    height:height})

Where the +100 is the distance from the right and top respectively