jQuery UI dialog positioning

Question

I am trying to use the jQuery dialog UI library in order to position a dialog next to some text when it is hovered over. The jQuery dialog takes a position parameter which is measured from the top left corner of the current viewport (in other words, [0, 0] will always put it in the upper left hand corner of your browser window, regardless of where you are currently scrolled to). However, the only way I know to retrieve the location is of the element relative to the ENTIRE page.

The following is what I have currently. position.top is calculated to be something like 1200 or so, which puts the dialog well below the rest of the content on the page.

$(".mytext").mouseover(function() {     position = $(this).position();     $("#dialog").dialog('option', 'position', [position.top, position.left]); } 

How can I find the correct position?

Thanks!

Answer 1

As an alternative, you could use the jQuery UI Position utility e.g.

$(".mytext").mouseover(function() {     var target = $(this);     $("#dialog").dialog("widget").position({        my: 'left',        at: 'right',        of: target     }); } 

Answer 2

Thanks to some answers above, I experimented and ultimately found that all you need to do is edit the "position" attribute in the Modal Dialog's definition:

position:['middle',20], 

JQuery had no problems with the "middle" text for the horizontal "X" value and my dialog popped up in the middle, 20px down from the top.

I heart JQuery.