jQuery UI对话框定位
我正在尝试使用jQuery对话框用户界面库，以便当它hover在一些文本旁边的对话框。 jQuery对话框中的位置参数是从当前视口的左上angular开始测量的（换句话说，无论您当前在哪里， [0, 0]将始终将其置于浏览器窗口的左上angular滚动到）。 但是，我知道检索位置的唯一方法是相对于整个页面的元素。
以下是我目前的。 position.top被计算为1200左右，这使对话远低于页面上其余的内容。
$(".mytext").mouseover(function() { position = $(this).position(); $("#dialog").dialog('option', 'position', [position.top, position.left]); }
我如何find正确的位置？
谢谢！
查看一些对话框的其他实现的jQuery插件。 Cluetip似乎是一个function丰富的工具提示/对话框样式插件。 第四个演示听起来类似于你正在做的事情（虽然我看到它没有你正在寻找的精确定位选项）。
作为替代，你可以使用jQuery的UI Position工具，例如
$(".mytext").mouseover(function() { var target = $(this); $("#dialog").dialog("widget").position({ my: 'left', at: 'right', of: target }); }
感谢上面的一些答案，我尝试了一下，最终发现你所要做的就是编辑modal dialog定义中的“position”属性：
position:['middle',20],
JQuery对于水平“X”值的“中间”文本没有问题，我的对话框popup中间，从顶部向下20px。
我心里的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对话框元素上面刚刚点击的元素（认为“讲话泡泡”）：
$('#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，你应该是一个OK。
http://docs.jquery.com/UI/API/1.8/Dialog
左上angular的固定对话框示例：
$("#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'，在：'center'，of：window}
EG： http : //jsfiddle.net/npbx4561/ – 从运行窗口中复制内容并删除DocType。 保存为HTML并运行以查看问题。
$(".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（）函数只是因为它计算相对于浏览器左上angular的位置，但是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]); }
如果我正确地理解你的问题，你的代码就是定位对话框，就好像页面没有滚动一样，但是你想要把滚动考虑进去。 我的代码应该这样做。
要把它放在控制之上，你可以使用这个代码：
$("#dialog-edit").dialog({ ... position: { my: 'top', at: 'top', of: $('#myControl') }, ... });
本页面显示如何确定您的滚动偏移量。 jQuery可能有类似的function，但我找不到它。 使用页面上显示的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'); });
我已经尝试了所有提出的解决scheme，但他们不会工作，因为对话框不是主要文档的一部分，将有自己的层（但这是我的教育猜测）。
- 使用
$("#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')
创build时不要改变对话框的位置。
而不是，我更改select器级别以获取整个对话框。
$("#dialog").parent() < – 这是dialog（）函数在DOM上创build的父对象，这是因为select器$（“＃dialog”）不会应用属性top，剩下。
为了让我的对话框居中 ，我使用了jQuery-Client-Centering-Plugin
$（ “＃对话”）父（）centerInClient（）。
你可以使用$(this).offset() ，这个位置与父类相关
上面的解决scheme是非常真实的…但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] }); })
$("#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}); } });
您可以在中心显示的样式中置顶，看到代码：
.ui-dialog {top：100px！important;}
这种风格应该显示从顶部100px的对话框。
