Position jquery UI dialog

Question

How can I position the jquery UI dialog SPECIFICALLY, so that it goes to a position not defined by center, top, etc.

Thanks, I have tried to be as specific as posible.

Answer 1

Using the position option : http://jqueryui.com/position/

Specifies where the dialog should be displayed. Possible values:

1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'.
2) an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100])
3) an array containing x,y position string values (e.g. ['right','top'] for top right corner).

For example : $( ".selector" ).dialog( "option", "position", [350,100] );

Answer 2

This isn't an exact answer to your question, but you can mix 'top' with pixel values, like this:

$('#widget').dialog({
  position: ['top', 100]
});

This will position the dialog centered along the X axis, 100 pixels down from the top.

Answer 3

If you want to use absolute positioning, the dialog's position option is what you need. If you need to position relative to other elements, there's another easy technique you use, jquery UI's $('selector').position(options); (seen at: http://jqueryui.com/demos/position/)

For example:

// div to position against
var $div = $('#someDiv');

// Open dialog (positioning won't work on hidden elements)
$dialog.dialog('open');

// position newly opened dialog (using its parent container) below $div.
$dialog.dialog('widget').position({
  my: "left top",
  at: "left bottom",
  of: $div
});