定位 jQuery 对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2079448/
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
Positioning jQuery dialog
提问by miro
I want to position my jQuery dialog x-pixels away from the right border of the browser. Is this anyhow possible?
我想将我的 jQuery 对话框放置在远离浏览器右边框 x 像素的位置。这无论如何可能吗？
http://jqueryui.com/demos/dialog/
http://jqueryui.com/demos/dialog/
The position option doesn't seem to have that kind of setup, but is there any other way to do it?
位置选项似乎没有这种设置，但是还有其他方法可以做到吗？
采纳答案by Anurag
If you make your dialog box's position:absolute, then its taken about of the regular page flow, and you can use the leftand topproperty to place it anywhere on the page.
如果您制作对话框的position:absolute，则它采用常规页面流，您可以使用leftandtop属性将其放置在页面上的任何位置。
$('.selector').dialog({ dialogClass: 'myPosition' });
and define the myPosition css class as:
并将 myPosition css 类定义为：
.myPosition {
position: absolute;
right: 200px; /* use a length or percentage */
}
You can set the top, left, right, and bottompropertiesfor myPositionusing either a length such as in pixels or percentage.
可以设置top，left，right，和bottom属性用于myPosition使用一个长度，例如以像素为单位或百分比。
回答by user583576
This keeps dialog div in fixed position
这使对话框 div 保持在固定位置
this works for me in IE FF chrome and safari
这在 IE FF chrome 和 safari 中对我有用
jQuery("#dialogDiv").dialog({
autoOpen: false,
draggable: true,
resizable: false,
height: 'auto',
width: 500,
modal: false,
open: function(event, ui) {
$(event.target).parent().css('position', 'fixed');
$(event.target).parent().css('top', '5px');
$(event.target).parent().css('left', '10px');
}
});
when you want dialog box open just call
当你想打开对话框时，只需调用
$('#dialogDiv').dialog('open');
回答by user3413723
Most of these answers seemed to be workarounds to me, and I wanted to find the official jQuery way to do it. After reading through the .position()docs, I found that it can indeed be done in the initialization of the jQuery widget:
这些答案中的大多数对我来说似乎都是解决方法，我想找到官方的 jQuery 方式来做到这一点。通读.position()文档后，发现确实可以在jQuery小部件的初始化中完成：
$("#dialog").dialog({
title:title,
position:{my:"right top",at:"right+100 top+100", of:"body"},
width:width,
height:height
})
Where the +100 is the distance from the right and top respectively
其中 +100 分别是与右侧和顶部的距离
回答by Sanjay Zalke
I understand the answer is already accepted but just in case if any one need more info: http://salman-w.blogspot.co.uk/2013/05/jquery-ui-dialog-examples.html
我知道答案已经被接受，但以防万一如果有人需要更多信息：http: //salman-w.blogspot.co.uk/2013/05/jquery-ui-dialog-examples.html
$(function() {
$("#dialog").dialog({
position: {
my: "right bottom",
at: "right bottom",
of: window
}
});
});
回答by sasan mohammadi
with this code u can specify ur top and left position:
使用此代码，您可以指定您的顶部和左侧位置：
$('#select_bezeh_window').dialog({
modal:true,
resizable:false,
draggable:false,
width:40+'%',
height:500 ,
position:{
using: function( pos ) {
$( this ).css( "top", 10+'px' );
$( this ).css( "left", 32+'%' );
}
}
});
回答by dfens
look here: http://jqueryui.com/demos/dialog/#option-position
看这里：http: //jqueryui.com/demos/dialog/#option-position
Initialize a dialog with the position option specified.
使用指定的位置选项初始化对话框。
$('.selector').dialog({ position: 'top' });
Get or set the position option, after init.
在 init 之后获取或设置位置选项。
//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');
回答by Victor
This worked for me to display the dialog at the top-right corner with 10px offset: position: "right-10 top+10":
这对我有用，可以在右上角以 10px 偏移量显示对话框position: "right-10 top+10"：：
$( "#my-dialog" ).dialog({
resizable: false,
height:"auto",
width:350,
autoOpen: false,
position: "right-10 top+10"
});
回答by Eduardo Cuomo
To fix center position, I use:
要固定中心位置，我使用：
open : function() {
var t = $(this).parent(), w = window;
t.offset({
top: (w.height() / 2) - (t.height() / 2),
left: (w.width() / 2) - (t.width() / 2)
});
}
