2

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.

Improve this question

2 Answers 2

Reset to default
13

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.

Improve this answer
1
  • 3
    +1 Awesome, helped me out for an older system using jQ UI 1.8.x. Thanks!
    – JAAulde
    Commented Apr 2, 2014 at 16:28
5

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] 
});
Improve this answer
3
  • I was afraid I'd have to do some calculations. I was hoping there would be a simpler way to do it.
    – Hawkee
    Commented Mar 20, 2012 at 19:40
  • 1
    +1 I just spent the last 30 minutes looking for the position: [300,200] part of this puzzle. Thanks!
    – Andrew Fox
    Commented Dec 30, 2012 at 15:59
  • Note: position: [300,200] does not work in 1.12.1 . The proper code is to use position: {my: 'top left', at: 'top+300 left+300', of: window}
    – Timothy C. Quinn
    Commented Jul 4 at 0:43

Not the answer you're looking for? Browse other questions tagged or ask your own question.