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.

Indetermination

https://mcmap.net/q/181801/-jquery-ui-dialog-positioning – Hegira

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] );

Dowell

Note that this array form of position is now deprecated api.jqueryui.com/dialog/#option-position – Cloudy

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.

Primm

Just so you know, the 'top' component isn't doing anything in this example. When you pass an array to the position option, it is expecting an [x,y] coordinate pair. The string can't get parsed as an integer, so the default horizontal positioning stays as center. You can replace the 'top' part with any string and it will still work the same way: Fiddle Demo – Incontrollable

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
});

Mush

@Cloudy Your comment seems to imply that this form is deprecated. This is not using an array, but an object parameter, which is the desired parameter type for the position method. You are correct in saying that the array and string parameter forms are deprecated. – Mush