Positioning jQuery dialog

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?

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

I understand the answer is already accepted but just in case if any one need more info: http://salman-w.blogspot.co.uk/2013/05/jquery-ui-dialog-examples.html

$(function() {
            $("#dialog").dialog({
                position: {
                    my: "right bottom",
                    at: "right bottom",
                    of: window
                }
            });
        });

with this code u can specify ur top and left position:

$('#select_bezeh_window').dialog({
    modal:true,
    resizable:false,
      draggable:false,
      width:40+'%',
      height:500 ,
      position:{
          using: function( pos ) {
                $( this ).css( "top", 10+'px' );
                $( this ).css( "left", 32+'%' );
          }
       }
 });

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

This worked for me to display the dialog at the top-right corner with 10px offset: position: "right-10 top+10":

$( "#my-dialog" ).dialog({
    resizable: false,
    height:"auto",
    width:350,
    autoOpen: false,
    position: "right-10 top+10"
});

To fix center position, I use:

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}