我正在尝试使用jQuery dialog UI库，以便在某些文本悬停时将对话框放在旁边。 jQuery对话框采用一个位置参数，该参数是从当前视口的左上角开始测量的（换句话说，[0, 0]将始终将其放在浏览器窗口的左上角，无论您当前在哪里滚动到）。但是，我知道检索位置的唯一方法是相对于整个页面的元素。
以下是我目前的情况。 position.top的计算结果大约为1200左右，这使得对话框远低于页面上其他内容。
$(".mytext").mouseover(function() {
position = $(this).position();
$("#dialog").dialog('option', 'position', [position.top, position.left]);
}
如何找到正确的位置？
谢谢！
答案 0 :(得分：108)
作为替代方案，您可以使用jQuery UI Position utility例如
$(".mytext").mouseover(function() {
var target = $(this);
$("#dialog").dialog("widget").position({
my: 'left',
at: 'right',
of: target
});
}
答案 1 :(得分：82)
感谢上面的一些答案，我进行了实验并最终发现您需要做的就是在模态对话框的定义中编辑“position”属性：
position:['middle',20],
JQuery对于水平“X”值的“中间”文本没有问题，我的对话框在中间弹出，从顶部向下20px。
我心中有JQuery。
答案 2 :(得分：42)
阅读完所有回复后，这终于对我有用了：
$(".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]);
});
答案 3 :(得分：16)
将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元素。这是因为jQuery无法在没有ui-dialog元素出现在页面中的情况下评估outerWidth（）或outerHeight（）。
请务必在对话框选项中将'modal'设置为false，然后你就可以了。
答案 4 :(得分：15)
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");
});
答案 5 :(得分：14)
查看一些用于对话框其他实现的jQuery插件。 Cluetip似乎是一个功能丰富的工具提示/对话框样式插件。第4个演示听起来与你想要做的类似（虽然我发现它没有你正在寻找的精确定位选项。）
答案 6 :(得分：14)
检查<!DOCTYPE html>
我注意到如果您错过了HTML文件顶部的<!DOCTYPE html>，则对话框会显示在文档内容的中心，而不是在窗口内，即使您指定了位置：{my ：＆＃39; center＆＃39;，at：＆＃39; center＆＃39;，of：window}
EG：http://jsfiddle.net/npbx4561/ - 从运行窗口复制内容并删除DocType。保存为HTML并运行以查看问题。
答案 7 :(得分：7)
要将其置于控件之上，您可以使用以下代码：
$("#dialog-edit").dialog({
...
position: {
my: 'top',
at: 'top',
of: $('#myControl')
},
...
});
答案 8 :(得分：7)
$(".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的位置，即元素的父级。
答案 9 :(得分：6)
而不是做纯jquery，我会这样做：
$(".mytext").mouseover(function() {
x= $(this).position().left - document.scrollLeft
y= $(this).position().top - document.scrollTop
$("#dialog").dialog('option', 'position', [y, x]);
}
如果我正确理解你的问题，你所拥有的代码就是定位对话框，好像页面没有滚动，但是你想让它考虑滚动。我的代码应该这样做。
答案 10 :(得分：4)
我不认为讲话泡泡是对的。我调整了一下，以便它可以工作，项目在链接下面打开。
function PositionDialog(link) {
$('#myDialog').dialog('open');
var myDialogX = $(link).position().left;
var myDialogY = $(link).position().top + $(link).outerHeight();
$('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}
答案 11 :(得分：4)
有点晚了但你现在可以通过使用$ j（object）.offset（）。left和.top来做到这一点。
答案 12 :(得分：4)
此page显示了如何确定滚动偏移量。 jQuery可能有类似的功能，但我找不到它。使用页面上显示的getScrollXY函数，您应该能够从.position（）结果中减去x和y坐标。
答案 13 :(得分：3)
$("#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});
}
});
答案 14 :(得分：3)
要修复中心位置，我使用：
open : function() {
var t = $(this).parent(), w = window;
t.offset({
top: (w.height() / 2) - (t.height() / 2),
left: (w.width() / 2) - (t.width() / 2)
});
}
答案 15 :(得分：3)
这是代码..，如何将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');
});
答案 16 :(得分：2)
我已经尝试了所有提议的解决方案，但是它们不起作用，因为对话框不是主文档的一部分，并且将有自己的图层（但这是我经过深思熟虑的猜测）。
$("#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]);
这样坐标来自对话框而非文档，位置根据对话框的层次而改变。
答案 17 :(得分：1)
我尝试了很多方法让我的对话框在页面上居中并看到代码：
$("#dialog").dialog("option", "position", 'top')
在创建对话框时永远不会更改对话框位置。
而不是，我改变选择器级别以获得整个对话框。
$("#dialog").parent()＆lt; - 这是dialog（）函数在DOM上创建的父对象，这是因为选择器$（“＃dialog”）不应用属性top，left。
要使我的对话框居中，我使用jQuery-Client-Centering-Plugin
$（ “＃对话”）母体（）centerInClient（）;
答案 18 :(得分：1)
以上解决方案非常正确......但在调整窗口大小后，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]
});
})
答案 19 :(得分：1)
你可以使用$(this).offset()，职位与父母相关
答案 20 :(得分：0)
你可以设置样式的顶部位置以便在中心显示，看到代码：
.ui-dialog {top：100px！important;}
此样式应显示从顶部开始的对话框100px。