Wic*_*wok 114 jquery jquery-ui
我正在尝试使用jQuery对话框UI库,以便在它悬停在某些文本旁边时放置一个对话框.jQuery对话框采用一个位置参数,该参数是从当前视口的左上角开始测量的(换句话说[0, 0],无论您当前滚动到何处,都会将其放在浏览器窗口的左上角).但是,我知道检索位置的唯一方法是相对于ENTIRE页面的元素.
以下是我目前的情况. position.top被计算为大约1200左右,这使得对话框远低于页面上其他内容.
$(".mytext").mouseover(function() {
position = $(this).position();
$("#dialog").dialog('option', 'position', [position.top, position.left]);
}
我怎样才能找到正确的位置？
谢谢!
Bri*_*unt 109
作为替代方案,您可以使用jQuery UI Position实用程序,例如
$(".mytext").mouseover(function() {
var target = $(this);
$("#dialog").dialog("widget").position({
my: 'left',
at: 'right',
of: target
});
}
小智 81
感谢上面的一些答案,我进行了实验并最终发现您需要做的就是在Modal Dialog的定义中编辑"position"属性:
position:['middle',20],
JQuery对于水平"X"值的"中间"文本没有问题,我的对话框在中间弹出,从顶部向下20px.
我心中有JQuery.
小智 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]);
});
mar*_*dup 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,你应该没问题.
小智 16
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");
});
Dan*_*nce 14
检查你的 <!DOCTYPE html>
我注意到如果你遗漏了<!DOCTYPE html>HTML文件的顶部,即使你指定位置,对话框也会显示在文档内容的中心,即使你指定了位置:{my:'center',at:'center' ,of:window}
EG:http://jsfiddle.net/npbx4561/ - 从运行窗口复制内容并删除DocType.保存为HTML并运行以查看问题.
要将其置于控件之上,您可以使用以下代码:
$("#dialog-edit").dialog({
...
position: {
my: 'top',
at: 'top',
of: $('#myControl')
},
...
});
小智 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元素的父级的位置.
而不是做纯jquery,我会这样做:
$(".mytext").mouseover(function() {
x= $(this).position().left - document.scrollLeft
y= $(this).position().top - document.scrollTop
$("#dialog").dialog('option', 'position', [y, x]);
}
如果我正确理解你的问题,你所拥有的代码就是定位对话框,好像页面没有滚动,但是你想让它考虑滚动.我的代码应该这样做.
小智 5
$("#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});
}
});