Positioning jQuery dialog

Question

I want to position my jQuery dialog x-pixels away from the right border of the browser. Is this anyhow possible?

http://jqueryui.com/demos/dialog/

The position option doesn't seem to have that kind of setup, but is there any other way to do it?

Answer 1

look here: http://jqueryui.com/demos/dialog/#option-position

Initialize a dialog with the position option specified.

 $('.selector').dialog({ position: 'top' });

Get or set the position option, after init.

//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');

Answer 2

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.