jQuery UI 对话框定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/744554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI dialog positioning
提问by Wickethewok
I am trying to use the jQuery dialog UIlibrary in order to position a dialog next to some text when it is hovered over. The jQuery dialog takes a position parameter which is measured from the top left corner of the current viewport (in other words, [0, 0]will always put it in the upper left hand corner of your browser window, regardless of where you are currently scrolled to). However, the only way I know to retrieve the location is of the element relative to the ENTIRE page.
我正在尝试使用jQuery 对话框 UI库，以便在将鼠标悬停在某些文本旁边时将其放置在对话框上。jQuery 对话框采用从当前视口左上角开始测量的位置参数（换句话说[0, 0]，无论您当前滚动到何处，都将始终将其放在浏览器窗口的左上角）。但是，我知道检索位置的唯一方法是相对于整个页面的元素。
The following is what I have currently. position.topis calculated to be something like 1200 or so, which puts the dialog well below the rest of the content on the page.
以下是我目前所拥有的。 position.top计算为 1200 左右，这使得对话框远远低于页面上的其余内容。
$(".mytext").mouseover(function() {
position = $(this).position();
$("#dialog").dialog('option', 'position', [position.top, position.left]);
}
How can I find the correct position?
我怎样才能找到正确的位置？
Thanks!
谢谢！
采纳答案by Ben Koehler
Check out some of the jQuery plugins for other implementations of a dialog. Cluetipappears to be a feature-rich tooltip/dialog style plug-in. The 4th demo sounds similar to what you are trying to do (although I see that it doesn't have the precise positioning option that you're looking for.)
查看一些 jQuery 插件以了解对话框的其他实现。 Cluetip似乎是一个功能丰富的工具提示/对话框风格的插件。第 4 个演示听起来与您正在尝试做的类似（尽管我发现它没有您正在寻找的精确定位选项。）
回答by Brian M. Hunt
As an alternative, you could use the jQuery UI Positionutilitye.g.
作为替代方案，您可以使用jQuery UIPosition实用程序，例如
$(".mytext").mouseover(function() {
var target = $(this);
$("#dialog").dialog("widget").position({
my: 'left',
at: 'right',
of: target
});
}
回答by user1288395
Thanks to some answers above, I experimented and ultimately found that all you need to do is edit the "position" attribute in the Modal Dialog's definition:
感谢上面的一些答案，我进行了试验并最终发现您需要做的就是编辑模态对话框定义中的“位置”属性：
position:['middle',20],
JQuery had no problems with the "middle" text for the horizontal "X" value and my dialog popped up in the middle, 20px down from the top.
JQuery 对水平“X”值的“中间”文本没有问题，我的对话框在中间弹出，距顶部 20 像素。
I heart JQuery.
我很喜欢 JQuery。
回答by Jaymin Patel
After reading all replies, this finally worked for me:
阅读所有回复后，这终于对我有用：
$(".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]);
});
回答by markedup
Taking Jaymin's example a step further, I came up with this for positioning a jQuery ui-dialog element above the element you've just clicked (think "speech bubble"):
以 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] );
Note that I "open" the ui-dialog element before calculating the relative width and height offsets. This is because jQuery can't evaluate outerWidth() or outerHeight() without the ui-dialog element physically appearing in the page.
请注意，我在计算相对宽度和高度偏移之前“打开”了 ui-dialog 元素。这是因为如果 ui-dialog 元素没有实际出现在页面中，jQuery 就无法评估 externalWidth() 或 outerHeight()。
Just be sure to set 'modal' to false in your dialog options and you should be a-OK.
只要确保在对话框选项中将 'modal' 设置为 false 就可以了。
回答by xhochn
http://docs.jquery.com/UI/API/1.8/Dialog
http://docs.jquery.com/UI/API/1.8/Dialog
Example for fixed dialog on the left top corner:
左上角固定对话框的示例：
$("#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");
});
回答by Daniel Flippance
Check your <!DOCTYPE html>
检查你的 <!DOCTYPE html>
I've noticed that if you miss out the <!DOCTYPE html>from the top of your HTML file, the dialog is shown centred within the document content not within the window, even if you specify position: { my: 'center', at: 'center', of: window}
我注意到，如果您错过了<!DOCTYPE html>HTML 文件顶部的 ，则即使您指定 position: { my: 'center', at: 'center' , of: 窗口}
EG: http://jsfiddle.net/npbx4561/- Copy the content from the run window and remove the DocType. Save as HTML and run to see the problem.
例如：http: //jsfiddle.net/npbx4561/- 从运行窗口复制内容并删除 DocType。另存为 HTML 并运行以查看问题。
回答by live-love
To put it right on top of control, you can use this code:
要将其置于控制之上，您可以使用以下代码：
$("#dialog-edit").dialog({
...
position: {
my: 'top',
at: 'top',
of: $('#myControl')
},
...
});
回答by M. Belen
$(".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]});
}
Positions a dialog just under an element. I used offset() function just because it calculates the position relative to upper left corner of the browser, but position() function calculates the position relative to parent div or iframe that parent of the element.
将对话框放置在元素正下方。我使用 offset() 函数只是因为它计算相对于浏览器左上角的位置，但 position() 函数计算相对于父元素的父 div 或 iframe 的位置。
回答by Samuel
instead of doing pure jquery, i would do:
而不是做纯 jquery，我会做：
$(".mytext").mouseover(function() {
x= $(this).position().left - document.scrollLeft
y= $(this).position().top - document.scrollTop
$("#dialog").dialog('option', 'position', [y, x]);
}
if i am understanding your question correctly, the code you have is positioning the dialog as if the page had no scroll, but you want it to take the scroll into account. my code should do that.
如果我正确理解您的问题，您拥有的代码将对话框定位为好像页面没有滚动，但您希望它考虑滚动。我的代码应该这样做。
