我正在尝试使用jQuery dialog UI 库，以便在将鼠标悬停在某些文本旁边时放置一个对话框。 jQuery 对话框采用从当前视口的左上角测量的位置参数（换句话说，[0, 0] 将始终将其放在浏览器窗口的左上角，无论您当前滚动到哪里）。但是，我知道检索位置的唯一方法是相对于整个页面的元素。
以下是我目前拥有的。 position.top 被计算为 1200 左右，这将对话框置于页面上其余内容的下方。
$(".mytext").mouseover(function() {
position = $(this).position();
$("#dialog").dialog('option', 'position', [position.top, position.left]);
}
我怎样才能找到正确的位置？
谢谢！
【问题讨论】：
作为替代方案，您可以使用 jQuery UI Position utility 例如
$(".mytext").mouseover(function() {
var target = $(this);
$("#dialog").dialog("widget").position({
my: 'left',
at: 'right',
of: target
});
}
【讨论】：
dialog，如下所示：$('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });
at: 'top+50' 而不是 at: 'top + 50'
$('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });
感谢上面的一些答案，我进行了实验，最终发现您需要做的就是编辑模态对话框定义中的“位置”属性：
position:['middle',20],
JQuery 对水平“X”值的“中间”文本没有问题，我的对话框在中间弹出，距离顶部 20 像素。
我喜欢 JQuery。
【讨论】：
阅读所有回复后，这终于对我有用：
$(".mytext").mouseover(function() {
var x = jQuery(this).position().left + jQuery(this).outerWidth();
var y = jQuery(this).position().top - jQuery(document).scrollTop();
jQuery("#dialog").dialog('option', 'position', [x,y]);
});
【讨论】：
以 Jaymin 的例子更进一步，我想出了一个将 jQuery ui-dialog 元素定位在您刚刚单击的元素上方的方法（想想“语音气泡”）：
$('#myDialog').dialog( 'open' );
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
$('#myDialog').dialog( 'option', 'position', [myDialogX, myDialogY] );
请注意，我在计算相对宽度和高度偏移之前“打开”了 ui-dialog 元素。这是因为如果没有 ui-dialog 元素实际出现在页面中，jQuery 就无法计算 outerWidth() 或 outerHeight()。
请务必在对话框选项中将“modal”设置为 false，然后您就可以了。
【讨论】：
myDialogX 和 myDialogY
http://docs.jquery.com/UI/API/1.8/Dialog
左上角固定对话框示例：
$("#dialogId").dialog({
autoOpen: false,
modal: false,
draggable: false,
height: "auto",
width: "auto",
resizable: false,
position: [0,28],
create: function (event) { $(event.target).parent().css('position', 'fixed');},
open: function() {
//$('#object').load...
}
});
$("#dialogOpener").click(function() {
$("#dialogId").dialog("open");
});
【讨论】：
检查您的<!DOCTYPE html>
我注意到，如果您错过了 HTML 文件顶部的 <!DOCTYPE html>，即使您指定了位置：{ my: 'center' , at: 'center', of: window}
EG：http://jsfiddle.net/npbx4561/ - 从运行窗口复制内容并删除 DocType。另存为 HTML 并运行以查看问题。
【讨论】：
查看一些 jQuery 插件以了解对话框的其他实现。 Cluetip 似乎是一个功能丰富的工具提示/对话框样式插件。第 4 个演示听起来与您正在尝试做的类似（尽管我发现它没有您正在寻找的精确定位选项。）
【讨论】：
要将其置于控制之上，您可以使用以下代码：
$("#dialog-edit").dialog({
...
position: {
my: 'top',
at: 'top',
of: $('#myControl')
},
...
});
【讨论】：
$(".mytext").mouseover(function() {
var width = 250;
var height = 270;
var posX = $(this).offset().left - $(document).scrollLeft() - width + $(this).outerWidth();
var posY = $(this).offset().top - $(document).scrollTop() + $(this).outerHeight();
$("#dialog").dialog({width:width, height:height ,position:[posX, posY]});
}
在元素下方放置一个对话框。 我使用 offset() 函数只是因为它计算相对于浏览器左上角的位置，但 position() 函数计算相对于父 div 或 iframe 元素的父元素的位置。
【讨论】：
我不会做纯 jquery，而是：
$(".mytext").mouseover(function() {
x= $(this).position().left - document.scrollLeft
y= $(this).position().top - document.scrollTop
$("#dialog").dialog('option', 'position', [y, x]);
}
如果我正确理解您的问题，您的代码会将对话框定位为好像页面没有滚动，但您希望它考虑滚动。我的代码应该这样做。
【讨论】：
$("#myid").dialog({height:"auto",
width:"auto",
show: {effect: 'fade', speed: 1000},
hide: {effect: 'fade', speed: 1000},
open: function( event, ui ) {
$("#myid").closest("div[role='dialog']").css({top:100,left:100});
}
});
【讨论】：
page 展示了如何确定滚动偏移量。 jQuery 可能有类似的功能，但我找不到。使用页面上显示的 getScrollXY 函数，您应该能够从 .position() 结果中减去 x 和 y 坐标。
【讨论】：
有点晚了，但您现在可以通过相应地使用 $j(object).offset().left 和 .top 来做到这一点。
【讨论】：
我不认为讲话泡泡是完全正确的。我对其进行了一些调整，使其能够正常工作，并且该项目在链接下方打开。
function PositionDialog(link) {
$('#myDialog').dialog('open');
var myDialogX = $(link).position().left;
var myDialogY = $(link).position().top + $(link).outerHeight();
$('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}
【讨论】：
为了固定中心位置，我使用：
open : function() {
var t = $(this).parent(), w = window;
t.offset({
top: (w.height() / 2) - (t.height() / 2),
left: (w.width() / 2) - (t.width() / 2)
});
}
【讨论】：
这里是代码..，如何将 jQuery UI 对话框定位到中心......
var $about = $("#about");
$("#about_button").click(function() {
$about.dialog({
modal: true,
title: "About the calendar",
width: 600,
close: function() {
$about.dialog("destroy");
$about.hide();
},
buttons: {
close : function() {
$about.dialog("close");
}
}
}).show();
$about.dialog("option", "position", 'center');
});
【讨论】：
你可以使用$(this).offset()，位置与父级相关
【讨论】：
我已经尝试了所有建议的解决方案，但它们不起作用，因为对话框不是主文档的一部分，并且会有自己的层（但这是我有根据的猜测）。
$("#dialog").dialog("option", "position", 'top') 初始化对话框
$(dialog).dialog("open");打开它
然后获取显示对话框的x和y（不是文档的任何其他节点！）
var xcoord = $(dialog).position().left + ADD_MODIFIER_FOR_X_HERE;
var ycoord= $(dialog).position().top + ADD_MODIFIER_FOR_Y_HERE;
$(dialog).dialog('option', 'position', [xcoord , ycoord]);
这样坐标来自对话框而不是文档，并且位置根据对话框的层而改变。
【讨论】：
我尝试了很多方法让我的对话框在页面上居中并看到代码：
$("#dialog").dialog("option", "position", 'top')
在创建时不要更改对话框位置。
我改为更改选择器级别以获取整个对话框。
$("#dialog").parent()
为了使我的对话居中，我使用jQuery-Client-Centering-Plugin
$("#dialog").parent().centerInClient();
【讨论】：
以上解决方案都非常正确...但是UI对话框在调整窗口大小后不保留位置。 下面的代码就是这样做的
$(document).ready(function(){
$(".test").click(function(){
var posX = $(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
console.log("in click function");
$(".abc").dialog({
position:[posX,posY]
});
})
})
$(window).resize(function(){
var posX=$(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
$(".abc").dialog({
position:[posX,posY]
});
})
【讨论】：
您可以在样式中设置顶部位置以显示在中心，看到代码：
.ui-dialog{top: 100px !important;}
这种样式应该在距离顶部 100px 的地方显示对话框。
【讨论】：