对话框定位

Question

我需要显示单击的对话框。 如果我单击下面的链接，则对话框必须显示在我单击链接的位置下，该对话框必须显示在相同位置，但是即使我们单击该链接，对话框中的代码也仍显示在页面的顶部中心。

jQuery的

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

请帮助我获取鼠标位置的对话框。

我也尝试了顶部和左侧的位置。 但我没有得到答案

Answer 1

也许这会让您知道如何执行此操作：

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

这是演示的链接。

jQuery offset（）返回相对于文档的元素位置，而position（）返回相对于偏移父元素的元素位置。

Answer 2

尝试这样的事情

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

在这里查看对话框定位api以获得更多信息： http : //api.jqueryui.com/dialog/#option-position

更新 ：现场演示： http : //jsfiddle.net/7b2RF/