对话框定位答案

【问题标题】：Dialog box positioning对话框定位
【发布时间】：2014-01-29 10:39:43
【问题描述】：

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

jquery

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

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

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

【问题讨论】：

标签： jquery dialog modal-dialog

【解决方案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() 返回相对于偏移父元素的位置。

【讨论】：

【解决方案2】：

试试这样的

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

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

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

【讨论】：

我使用此代码，但对话框仅显示在顶部。我在成功功能之前检查了警报框，使用的警报框显示了我单击的位置，但在成功功能中，使用的警报框显示在顶部
查看上面更新中的实时演示，这里我在小提琴中清理了一些相同的代码并使用类而不是 ID，因此您可以将它用于同一类的无限数量的元素，在这种情况下我使用了“divs”类。希望这会有所帮助。
在 ajax 中我使用了 success:function(objRequest) { alert(left); $('.showTemplateDialog').html($.trim(objRequest)); $('.showTemplateDialog').dialog("open"); $(".showTemplateDialog").dialog({ position: [left + 15, top + 20] }); }，在成功的内部，警报也显示在顶部