如何将我的 jQuery 对话框定位到中心？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1839702/
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
How can I position my jQuery dialog to center?
提问by newbie
I have tried following code, but it only positions dialogs left upper corner position to center, and that makes element to be aligned to right. How can I center dialog to real center which counts elements width, so that center line will cut dialog to 50% 50% halfs?
我试过下面的代码，但它只将对话框的左上角位置定位到中心，这使得元素向右对齐。如何将对话框居中到计算元素宽度的真实中心，以便中心线将对话框切割为 50% 50% 的一半？
$('.selector').dialog({ position: 'center' });
采纳答案by Luke Duddridge
I'm pretty sure you shouldn't need to set a position:
我很确定您不需要设置位置：
$("#dialog").dialog();
I did have a look at the article, and also checked what it says on the official jquery-ui site about positioning a dialog: and in it were discussed 2 states of: initialise and after initialise.
我确实看过这篇文章，还检查了官方 jquery-ui 站点上关于定位对话框的内容：并在其中讨论了两种状态：初始化和初始化之后。
Code examples - (taken from jQuery UI 2009-12-03)
代码示例 - （取自 jQuery UI 2009-12-03）
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');
I think that if you were to remove the position attribute you would find it centers by itself else try the second setter option where you define 3 elements of "option" "position" and "center".
我认为，如果您要删除 position 属性，您会发现它自己居中，否则请尝试第二个 setter 选项，您可以在其中定义“选项”、“位置”和“中心”的 3 个元素。
回答by WhyNotHugo
The latest jQuery UI has a position component:
最新的 jQuery UI 有一个位置组件：
$("#myDialog").position({
my: "center",
at: "center",
of: window
});
Doc: http://jqueryui.com/demos/position/
Get: http://jqueryui.com/download
文档：http: //jqueryui.com/demos/position/
获取：http: //jqueryui.com/download
回答by projo
Because the dialog need a position, You need to include the js position
因为对话框需要一个位置，所以需要包含js位置
<script src="jquery.ui.position.js"></script>
回答by Mike
So if anyone hits this page like I did, or for when I forget in 15 minutes, I'm using jqueryui dialog version 1.10.1 and jquery 1.9.1 with ie8 in an iframe(blah), and it needs a within specified or it doesn't work, i.e.
因此，如果有人像我一样点击此页面，或者当我在 15 分钟内忘记时，我将在 iframe（等等）中使用 jqueryui 对话框版本 1.10.1 和 jquery 1.9.1 和 ie8（等等），并且它需要指定或它不起作用，即
position: {
my: "center bottom",
at: "center top",
of: $("#submitbutton"),
within: $(".content")
}
Thanks to @vm370 for pointing me in the right direction.
感谢@vm370 为我指明了正确的方向。
回答by Jean Paul A.K.A el_vete
open: function () {
var win = $(window);
$(this).parent().css({
position: 'absolute',
left: (win.width() - $(this).parent().outerWidth()) / 2,
top: (win.height() - $(this).parent().outerHeight()) / 2
});
}
回答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)
});
}
回答by Rikin Patel
Try this....
尝试这个....
$(window).resize(function() {
$("#dialog").dialog("option", "position", "center");
});
回答by Derek Gogol
I'm getting best results to put jQuery dialog in the center of browser's window with:
将 jQuery 对话框放在浏览器窗口的中心，我得到了最好的结果：
position: { my: "center bottom", at: "center center", of: window },
There's probably more accurate way to position it with option "using" as described in the documentation at http://api.jqueryui.com/position/but I'm in a hurry...
如http://api.jqueryui.com/position/ 上的文档中所述，可能有更准确的方法使用选项“ using”来定位它，但我很着急......
回答by okki
I have to call function dialog()twice to position the dialog (jQuery v1.11.2 / jQueryUI v1.10.4).
我必须调用函数dialog()两次来定位对话框（jQuery v1.11.2 / jQueryUI v1.10.4）。
$("#myDialog").dialog({
/* initial dialog parameters */
}).dialog({
position: {
my: "center center",
at: "center center",
of: window
}
});
回答by Rakesh Prajapati
Following position parameter worked for me
以下位置参数对我有用
position: { my: "right bottom", at: "center center", of: window },
Good luck!
祝你好运！
