定位jquery ui对话框

Question

如何相对于body内的div元素定位jquery ui对话框？

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

以下是demo的链接。

jQuery offset（）返回相对于document的元素postion，而position（）返回相对于offset parent。

Answer 2

使用jQuery position function或jQuery UI one

$('#dialog').position({of: $('#your_div')});

Answer 3

http://api.jquery.com/offset/显示了如何获取div元素的坐标。但是直接使用可能还不够，因为这取决于布局结构（浮点数，边距等）。