March 20, 2012

Positioning a jQuery UI dialog offset from the Center

Question by Hawkee

I’d like to position my jQuery UI dialogs a bit better. The default “center” position puts them directly in the middle of the page, but it certainly looks better to have them offset about 70% up the page as they are in Facebook. I’m looking at the .position function but am a bit unclear what the simplest solution is.

Answer by Starx

The easiest way would be to use the position()

$("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
});

Or, if you already have calculated the dimensions

var x = 50; //calculate the 70%, with your own logic
var y = 100;
$("#dialog").dialog('option', 'position', [x,y]);

Or you can specify the height during initialisation of the widget

$("#dialgo").dialog({
     autoOpen: false, 
     width: 400 , 
     position: [300,200] 
});
...

Please fill the form - I will response as fast as I can!