CODEWITHSUNDEEP
jqueryjquery-uidialogposition
Hawkee
Hawkee

Reputation: 2027

Positioning a jQuery UI dialog offset from the Center

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.

Upvotes: 2

Views: 9192

Answers (2)

mikelt21
mikelt21

Reputation: 2768

For jquery-ui 1.9+:

$("#dialog").dialog({ position: { my: "center", at: "top+30%", of: window } });

For jquery-ui 1.8:

$("#dialog").dialog({ position: { my: "center", at: "top", of: window, offset: "0 30%" } });

It's something like that but play around with offset values.

Upvotes: 13

Starx
Starx

Reputation: 78991

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

Upvotes: 5

Related Questions