对话框定位

时间:2014-01-29 10:39:43

标签: jquery dialog modal-dialog

我需要显示我点击的对话框。如果我点击下面的链接,对话框必须显示在下面我点击链接的对话框必须出现在同一位置,但在我的代码对话框中显示在页面的顶部中心,即使我们点击链接。

jquery的

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

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

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

2 个答案:

答案 0 :(得分: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]});
});

以下是demo的链接。

jQuery offset()返回相对于文档的元素位置,而position()返回相对于偏移父元素。

答案 1 :(得分:0)

尝试这样的事情

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

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

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