Dialog box positioning

Question

I need to show the dialog where i clicked. If i click below link the dialog box must show below where i click the link the dialog box must appear in same position but in my code dialog box is showing at the top center of the page even ever we click the link.

jquery

$(".showTemplateDialog").dialog('option', 'position', ['center',e.pageY]);

Please help me for the get the dialog box at the mouse position .

I tried the with the top and left position also . but i didn't get the answer

Answer 1

Perhaps this might get you the idea how to do it:

HTML:

<div id="one" class="divs"></div>
<div id="two" class="divs"></div>

CSS:

.divs {
    float: left;
    height: 48px;
    width: 80px;
    border: 1px solid #55f;
}

JS:

$(document).ready(function(){
    var $div = $('#two');
    var left = $div.offset().left;
    var top= $div.offset().top;
    $('<p>Some dialog</p>').dialog({position: [left + 20, top + 20]});
});

Here is the link to demo .

jQuery offset() returns element postion relative to document, while position() returns relative to offset parent.

Answer 2

try something like this

$(".showTemplateDialog").dialog('option', 'position', [$(this).offset.left,$(this).offset.top]);

have a look at dialog box positioning api for more info here: http://api.jqueryui.com/dialog/#option-position

UPDATE : Live Demo: http://jsfiddle.net/7b2RF/