jQuery jqueryui对话框定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9304830/
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
jqueryui dialog positioning
提问by Joe Cartano
I am using JQuery UI and would like to position my dialog horizontally centered but vertically above center, maybe by a fixed amount of pixels or a relative distance from the top of the page. Is there an easy way to do this? It looks like there are just a couple pre-defined values or I can use an exact position but is there an easy way to accomplish this?
我正在使用 JQuery UI 并希望将我的对话框水平居中但垂直居中放置，可能是固定数量的像素或距页面顶部的相对距离。是否有捷径可寻？看起来只有几个预定义的值，或者我可以使用一个确切的位置，但是有没有一种简单的方法来实现这一点？
$("#dialog-form").dialog({
autoOpen: false,
width: 630,
position: 'center',
modal: true,
resizable: false,
closeOnEscape: false
});
回答by Alpha Codemonkey
Use the position optionto align the top of the dialog with the top of the window (plus a pixel or percent offset).
使用位置选项将对话框顶部与窗口顶部对齐（加上像素或百分比偏移）。
This should center the dialog horizontally and position it 150 pixels from the top.
这应该将对话框水平居中并将其放置在距顶部 150 像素的位置。
$("#dialog-form").dialog({
autoOpen: false,
width: 630,
position: { my: 'top', at: 'top+150' },
modal: true,
resizable: false,
closeOnEscape: false
});
Older versions of jQuery UI used an array containing an [x,y] coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100]).
旧版本的 jQuery UI 使用一个数组，该数组包含一个 [x,y] 坐标对，以从左上角的像素偏移量表示，视口（例如 [350,100]）。
var dialogWidth = 630;
$("#dialog-form").dialog({
// ...
width: dialogWidth,
position: [($(window).width() / 2) - (dialogWidth / 2), 150],
// ...
});
回答by Dragon
This worked for me
这对我有用
position: { my: "center", at: "center", of: window },
Also you can check dialog positions here
Find Position
您也可以在此处检查对话位置
查找位置
回答by Exlord
i came across this while searching for the same question bu i already had my answer :
我在搜索相同的问题时遇到了这个问题，但我已经有了答案：
position: ['center', 'top+100']
this will center horizontally and 100 pixel from top
这将水平居中，距顶部 100 像素
this works also
这也有效
position: ['center', 'center+100']
center horizontally and 100 pixel from below center
水平居中，距中心下方 100 像素
回答by Mikeys4u
I adjusted Exlord's answer to fit.
我调整了 Exlord 的答案以适应。
position: ['center-7%', 'center-12%']
位置：['center-7%', 'center-12%']
This adjusts horizontally and vertically
这可以水平和垂直调整
$(".popup").dialog({
position: ['center-7%', 'center-12%'],
title: 'Updating',
width: "auto",
}
});
回答by Ahmed
Try this:
尝试这个：
position: {
my: 'top',
at: 'top',
of: $('#some-div')
},
回答by Santosh Bt
position: {
my: 'top',
at: 'top+150'
}
Worked for me.
为我工作。
回答by DMadden51
If anyone is creating a link that opens a jQuery dialog due to the link's classhaving a click event handler, you maynotice that it might jump to the top of the page but create the modal dialog deeper down the page and you have to scroll to it.
如果有人因为链接的类具有单击事件处理程序而创建一个打开 jQuery 对话框的链接，您可能会注意到它可能会跳转到页面顶部，但在页面更深处创建模态对话框，您必须滚动到它。
If anyone is just trying to stop the jQuery dialog from jumping to the top, wanting it to stay near the link you clicked, just remove href. Nearly went mad trying to solve this. The HTML5 specification apparently understands href=""or href="#"to mean move to the top.
如果有人只是想阻止 jQuery 对话框跳到顶部，希望它停留在您单击的链接附近，只需删除href. 试图解决这个问题几乎发疯了。HTML5 规范显然理解href=""或href="#"意味着移动到顶部。
回答by Bert
apply css into your #dialog-form use % sample
将 css 应用到您的 #dialog-form use % sample
if width = 1000
如果宽度 = 1000
put
放
left:50% margin-left:-500px;
left:50% margin-left:-500px;
to make it centered. or you can use iframe.
使其居中。或者你可以使用 iframe。
