blocks|key|1368313|text|查看对话框的其他实现的一些jQuery插件。Cluetip似乎是一个功能丰富的工具提示/对话框风格的插件。第四个演示听起来和你想要做的很相似(尽管我看到它没有你想要的精确定位选项)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1368314|entityMap|0|LINK|mutability|MUTABLE|url|http://examples.learningjquery.com/67/demo/^0|M|7|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Check out some of the jQuery plugins for other implementations of a dialog. <a href="http://examples.learningjquery.com/67/demo/" rel="nofollow noreferrer">Cluetip</a> appears 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.)

blocks|key|1583715|text|作为替代，您可以使用jQuery+UI+Position+utility，例如|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1583716|$(".mytext").mouseover(function()+{
++++var+target+=+$(this);
++++$("#dialog").dialog("widget").position({
+++++++my:+'left',
+++++++at:+'right',
+++++++of:+target
++++});
}|code-block|syntax|javascript|1583717|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/demos/position/^0|K|8|A|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

As an alternative, you could use the <a href="http://jqueryui.com/demos/position/" rel="noreferrer">jQuery UI <code>Position</code> utility</a> e.g.

<pre><code>$(".mytext").mouseover(function() {
 var target = $(this);
 $("#dialog").dialog("widget").position({
 my: 'left',
 at: 'right',
 of: target
 });
}
</code></pre>

blocks|key|1368797|text|多亏了上面的一些答案，我尝试并最终发现，您所需要做的就是编辑Modal对话框的定义中的"position“属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1368798|position:['middle',20],|code-block|syntax|javascript|1368799|JQuery对水平"X“值的”中间“文本没有问题，我的对话框弹出在中间，从顶部向下20px。|1368800|我很喜欢JQuery。|1368801|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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:

<pre><code>position:['middle',20],
</code></pre>

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.

I heart JQuery.

blocks|key|1583504|text|在读完所有回复后，这对我来说终于奏效了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1583505|$(".mytext").mouseover(function()+{
++++var+x+=+jQuery(this).position().left+%2B+jQuery(this).outerWidth();
++++var+y+=+jQuery(this).position().top+-+jQuery(document).scrollTop();
++++jQuery("#dialog").dialog('option',+'position',+[x,y]);
});|code-block|syntax|javascript|1583506|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

After reading all replies, this finally worked for me:

<pre><code>$(".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]);
});
</code></pre>

blocks|key|1368484|text|将Jaymin的示例再往前一步，我想出了这个方法，将jQuery+ui对话框元素定位在您刚刚单击的元素之上(想想"speech+just“)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1368485|$('#myDialog').dialog(+'open'+);
var+myDialogX+=+$(this).position().left+-+$(this).outerWidth();
var+myDialogY+=+$(this).position().top+-+(+$(document).scrollTop()+%2B+$('.ui-dialog').outerHeight()+);
$('#myDialog').dialog(+'option',+'position',+[myDialogX,+myDialogY]+);|code-block|syntax|javascript|1368486|请注意，我在计算相对宽度和高度偏移之前“打开”了ui-dialog元素。这是因为如果ui-dialog元素没有实际出现在页面中，jQuery就不能计算outerWidth()或outerHeight()。|1368487|只需确保在对话框选项中将'modal‘设置为false，您应该是-OK。|1368488|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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"):

<pre><code>$('#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] );
</code></pre>

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.

Just be sure to set 'modal' to false in your dialog options and you should be a-OK.

blocks|key|1583989|text|http://docs.jquery.com/UI/API/1.8/Dialog|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1583990|左上角固定对话框示例：|1583991|$("#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");
});|code-block|syntax|javascript|1583992|entityMap|0|LINK|mutability|MUTABLE|url^0|0|14|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|4]]]]

<a href="http://docs.jquery.com/UI/API/1.8/Dialog">http://docs.jquery.com/UI/API/1.8/Dialog</a>

Example for fixed dialog on the left top corner:

<pre><code>$("#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");
});
</code></pre>

blocks|key|1369059|text|检查你的<!DOCTYPE+html>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1369060|我注意到，如果您忽略了HTML文件顶部的<!DOCTYPE+html>，即使您指定了位置：{+my：'center'，at：'center'，of:+window+}，对话框也会显示在文档内容的中心，而不是窗口内|1369061|例如：http://jsfiddle.net/npbx4561/+-从run窗口复制内容并删除DocType。另存为HTML并运行以查看问题。|1369062|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/npbx4561/^0|4|F|0|K|F|0|3|T|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|J|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

Check your <code>&lt;!DOCTYPE html&gt;</code>

I've noticed that if you miss out the <code>&lt;!DOCTYPE html&gt;</code> 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}

EG: <a href="http://jsfiddle.net/npbx4561/">http://jsfiddle.net/npbx4561/</a> - Copy the content from the run window and remove the DocType. Save as HTML and run to see the problem.

blocks|key|1369007|text|要将其放在控件之上，您可以使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1369008|++++$("#dialog-edit").dialog({
...++++
++++++++position:+{+
++++++++++++my:+'top',
++++++++++++at:+'top',
++++++++++++of:+$('#myControl')
++++++++},

...
++++});|code-block|syntax|javascript|1369009|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To put it right on top of control, you can use this code:

<pre><code> $("#dialog-edit").dialog({
... 
 position: { 
 my: 'top',
 at: 'top',
 of: $('#myControl')
 },

...
 });
</code></pre>

blocks|key|1583816|text|$(".mytext").mouseover(function()+{
+++var+width+=+250;
+++var+height+=+270;
+++var+posX+=+$(this).offset().left+-+$(document).scrollLeft()+-+width+%2B+$(this).outerWidth();
+++var+posY+=+$(this).offset().top+-+$(document).scrollTop()+%2B+$(this).outerHeight();
+++$("#dialog").dialog({width:width,+height:height+,position:[posX,+posY]});
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1583817|将对话框定位在元素的正下方。我使用offset()函数只是因为它计算相对于浏览器左上角的位置，而position()函数计算相对于父元素的父div或iframe的位置。|unstyled|1583818|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$(".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]});
}
</code></pre>

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.

blocks|key|1583413|text|我不会做纯jquery，而是这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1583414|$(".mytext").mouseover(function()+{
++++x=+$(this).position().left+-+document.scrollLeft
++++y=+$(this).position().top+-+document.scrollTop
++++$("#dialog").dialog('option',+'position',+[y,+x]);
}|code-block|syntax|javascript|1583415|如果我对您的问题理解正确的话，那么您的代码定位对话框就好像页面没有滚动一样，但您希望它将滚动考虑在内。我的代码应该做到这一点。|1583416|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

instead of doing pure jquery, i would do:

<pre><code>$(".mytext").mouseover(function() {
 x= $(this).position().left - document.scrollLeft
 y= $(this).position().top - document.scrollTop
 $("#dialog").dialog('option', 'position', [y, x]);
}
</code></pre>

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.

blocks|key|1369073|text|$("#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});++++++++++++++
+++++++++}
++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1369074|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$("#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}); 
 }
 });
</code></pre>

blocks|key|1583481|text|此page显示如何确定滚动偏移量。jQuery可能有类似的功能，但我找不到它。使用页面上显示的getScrollXY函数，您应该能够从.position()结果中减去x和y坐标。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1583482|entityMap|0|LINK|mutability|MUTABLE|url|http://www.howtocreate.co.uk/tutorials/javascript/browserwindow^0|1|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

This <a href="http://www.howtocreate.co.uk/tutorials/javascript/browserwindow" rel="nofollow noreferrer">page</a> shows how to determine your scroll offset. jQuery may have similar functionality but I couldn't find it. Using the getScrollXY function shown on the page, you should be able to subtract the x and y coords from the .position() results.

blocks|key|1368566|text|有点晚了，但是您现在可以使用$j(Object)、.offset()、.left和.top来完成这项工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1368567|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

a bit late but you can do this now by using $j(object).offset().left and .top accordingly.

blocks|key|1583779|text|我不认为演讲泡沫是正确的。我对它做了一点调整，这样它就可以工作了，项目就会在链接下面打开。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1583780|function+PositionDialog(link)+{
++++$('#myDialog').dialog('open');
++++var+myDialogX+=+$(link).position().left;
++++var+myDialogY+=+$(link).position().top+%2B+$(link).outerHeight();
++++$('#myDialog').dialog('option',+'position',+[myDialogX,+myDialogY]);
}|code-block|syntax|javascript|1583781|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I don't think the speech bubble is quite right. I tweaked it a bit so that it would work and the item opens right under the link.

<pre><code>function PositionDialog(link) {
 $('#myDialog').dialog('open');
 var myDialogX = $(link).position().left;
 var myDialogY = $(link).position().top + $(link).outerHeight();
 $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}
</code></pre>

blocks|key|1368854|text|要确定中心位置，我使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1368855|open+:+function()+{
++++var+t+=+$(this).parent(),+w+=+window;
++++t.offset({
++++++++top:+(w.height()+/+2)+-+(t.height()+/+2),
++++++++left:+(w.width()+/+2)+-+(t.width()+/+2)
++++});
}|code-block|syntax|javascript|1368856|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To fix center position, I use:

<pre><code>open : function() {
 var t = $(this).parent(), w = window;
 t.offset({
 top: (w.height() / 2) - (t.height() / 2),
 left: (w.width() / 2) - (t.width() / 2)
 });
}
</code></pre>

blocks|key|1583615|text|您可以使用$(this).offset()，位置与父级相关|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1583616|entityMap^0|5|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

you can use <code>$(this).offset()</code>, position is related to the parent

blocks|key|1583858|text|我尝试了很多方法来让我的对话框在页面上居中，并看到了代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1583859|$("#dialog").dialog("option",+"position",+'top')|offset|length|style|CODE|1583860|创建此对话框时，切勿更改对话框位置。|1583861|而不是更改选择器级别以获取整个对话框。|1583862|对话<--这是$("#dialog").parent()+()函数在DOM上创建的父对象，这是因为选择器$("#dialog")不应用属性top、left。|1583863|要使对话框居中，我使用jQuery-Client-Centering-Plugin|1583864|$("#dialog").parent().centerInClient()；|1583865|entityMap|0|LINK|mutability|MUTABLE|url|http://www.west-wind.com/weblog/posts/2008/Aug/21/A-simple-jQuery-Client-Centering-Plugin^0|0|0|1C|0|0|0|7|L|0|B|U|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|14|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|N|3|O|5|6|7|18|8|@]|9|@$D|19|E|1A|1|1B]]|A|$]]|$1|P|3|Q|5|6|7|1C|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

I tried for many ways to get my dialog be centered on the page and saw that the code: 

<code>$("#dialog").dialog("option", "position", 'top')</code> 

never change the dialog position when this was created.

Instead of, I change the selector level to get the entire dialog.

<code>$("#dialog").parent()</code> &lt;-- This is the parent object that the dialog() function create on the DOM, this is because the selector $("#dialog") does not apply the attributes, top, left.

To center my dialog, I use the <a href="http://www.west-wind.com/weblog/posts/2008/Aug/21/A-simple-jQuery-Client-Centering-Plugin" rel="nofollow">jQuery-Client-Centering-Plugin</a> 

$("#dialog").parent().centerInClient();

blocks|key|1584046|text|上面的解决方案是非常true...but的，UI对话框在窗口调整大小后不会保留位置。下面的代码可以做到这一点|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1584047|++++++++++++$(document).ready(function(){

++++++++++++++++$(".test").click(function(){
++++++++++++++++++++++++++++var+posX+=+$(".test").offset().left+-+$(document).scrollLeft()+%2B+$(".test").outerWidth();
++++++++++++++++++++++++++++var+posY+=+$(".test").offset().top+-+$(document).scrollTop()+%2B+$(".test").outerHeight();
++++++++++++++++++++++++++++console.log("in+click+function");
++++++++++++++++++++++++++++$(".abc").dialog({
++++++++++++++++++++++++++++++++position:[posX,posY]
++++++++++++++++++++++++++++});

++++++++++++++++++++++++})

++++++++++++})

++++++++++++$(window).resize(function(){
++++++++++++++++var+posX=$(".test").offset().left+-+$(document).scrollLeft()+%2B+$(".test").outerWidth();
++++++++++++++++var+posY+=+$(".test").offset().top+-+$(document).scrollTop()+%2B+$(".test").outerHeight();

++++++++++++$(".abc").dialog({
++++++++++++++++++++++++++++++++position:[posX,posY]
++++++++++++++++++++++++++++});
++++++++++++})|code-block|syntax|javascript|1584048|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

above solutions are very true...but the UI dialog does not retain the position after window is resized.
below code does this

<pre><code> $(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]
 });
 })
</code></pre>

blocks|key|1369103|text|你可以在样式中设置顶部位置以显示在中心，看到代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1369104|.ui-对话框{top:+100px+!important;}|1369105|此样式应从顶部开始显示100px的对话框。|1369106|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

You ca set top position in style for display on center, saw that the code:

.ui-dialog{top: 100px !important;}

This style should show dialog box 100px bellow from top.

I am trying to use the <a href="http://docs.jquery.com/UI/Dialog" rel="noreferrer">jQuery dialog UI</a> library 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, <code>[0, 0]</code> 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.

The following is what I have currently. <code>position.top</code> is calculated to be something like 1200 or so, which puts the dialog well below the rest of the content on the page.

<pre><code>$(".mytext").mouseover(function() {
 position = $(this).position();
 $("#dialog").dialog('option', 'position', [position.top, position.left]);
}
</code></pre>

How can I find the correct position?

Thanks!

jQuery UI dialog positioning

我正在尝试使用库，以便在将对话框悬停在某个文本旁边时将其定位在旁边。jQuery对话框采用一个位置参数，该参数从当前视口的左上角开始测量(换句话说，无论当前滚动到何处，[0, 0]都会始终将其放在浏览器窗口的左上角)。然而，我所知道的唯一检索位置的方法是元素相对于整个页面的位置。以下是我目前所拥有的。据计算，position.top大约为1200左右，这将使对话框远低于页面上的其余内容。$(".m

问jQuery UI对话框定位
EN

回答 19

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI对话框定位EN

回答 19

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery UI对话框定位
EN