jQuery UI dialog positioning

I am trying to use the jQuery dialog UI 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, [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.

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

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

How can I find the correct position?

Thanks!

335735 次浏览
小开

我不会使用纯 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.

小开
最佳答案

Check out some of the jQuery plugins for other implementations of a dialog. Cluetip 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.)

小开

此 呼叫显示如何确定滚动偏移量。JQuery 可能有类似的功能，但我找不到它。使用页面上显示的 getScrollXY 函数，您应该能够从。位置()结果。

小开

在阅读了所有的回复后，我终于明白了:

$(".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]);
});
小开

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

$('#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-Dialogue 元素。这是因为 jQuery 不能计算 outerWidth ()或 outerHeight () ，除非 ui-Dialogue 元素物理地出现在页面中。

只要确保在你的对话框选项中将“ mode”设置为 false，那么你就应该是一个-OK。

小开

您可以使用 $(this).offset()，位置是相关的父

小开

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

小开

作为一个替代方案，你可以使用 JQuery UI Position实用程序例如。

$(".mytext").mouseover(function() {
var target = $(this);
$("#dialog").dialog("widget").position({
my: 'left',
at: 'right',
of: target
});
}
小开

我不认为演讲泡沫是完全正确的。我稍微调整了一下，这样它就可以工作了，这个项目就在链接下面打开了。

function PositionDialog(link) {
$('#myDialog').dialog('open');
var myDialogX = $(link).position().left;
var myDialogY = $(link).position().top + $(link).outerHeight();
$('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}
小开 
$(".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]});
}

将对话框置于元素下方。 我使用偏移量()函数只是因为它计算相对于浏览器左上角的位置，而 position ()函数计算相对于元素的父 div 或者父 iframe 的位置。

小开

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

$("#dialog").dialog("option", "position", 'top')

永远不要更改创建时的对话框位置。

相反，我更改选择器级别以获取整个对话框。

$("#dialog").parent() < ——这是对话框()函数在 DOM 上创建的父对象，这是因为选择器 $(“ # 对话框”)没有应用属性。

为了使对话框居中，我使用了 以客户端为中心的插件

$(“ # 对话框”) . father () . centerInClient () ;

小开

多亏了上面的一些答案，我进行了实验，最终发现你所需要做的就是编辑模态对话框定义中的“ position”属性:

position:['middle',20],

JQuery 对于水平“ X”值的“中间”文本没有任何问题，我的对话框从顶部向下20px 出现在中间。

我喜欢 JQuery。

小开

我已经尝试了所有提出的解决方案，但它们都不起作用，因为对话框不是主文档的一部分，而且它有自己的层(但这是我的有根据的猜测)。

  1. 用 $("#dialog").dialog("option", "position", 'top')初始化对话框
  2. 用 $(dialog).dialog("open");打开

  3. 然后获取显示对话框的 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]);

这样，坐标来自对话框，而不是来自文档，并且根据对话框的层次改变位置。

小开

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");
});
小开

为了固定中心位置，我使用:

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

上述解决方案是非常正确的... 但界面对话框不保留窗口大小调整后的位置。 下面的代码可以做到这一点

            $(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]
});
})
小开

Here is the code..,how to position the jQuery UI dialog to center......

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');


});
小开

要将它放在控制的正上方，您可以使用以下代码:

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


...
});
小开

检查你的 <!DOCTYPE html>

我注意到，如果在 HTML 文件的顶部遗漏了 <!DOCTYPE html>，那么即使您指定了位置: { my: ‘ center’，at: ‘ center’，of: window } ，对话框也会显示在文档内容的中心，而不是窗口内

http://jsfiddle.net/npbx4561/-从运行窗口复制内容并删除 DocType。另存为 HTML 并运行以查看问题。

小开 
$("#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});
}
});
小开

您可以设置顶部位置的样式显示在中心，看到的代码:

对话框{ top: 100px! important; }

这种风格应该显示对话框100px 以下从顶部。


提交答案