jQuery UI 对话框未定位在屏幕中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1467102/
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
jQuery UI dialog box not positioned center screen
提问by David
I have a jQuery dialog box that is meant to position in the middle of the screen. However, it seems slightly off-center vertically.
我有一个 jQuery 对话框，用于定位在屏幕中间。然而，它似乎在垂直方向上稍微偏离了中心。
Here is the code:
这是代码：
$('#add_box').dialog({
autoOpen: true,
width: 300,
modal: true,
resizable: false,
bgiframe:true
});
Any ideas why this won't center?
任何想法为什么这不会居中？
回答by Ken Browning
If your viewport gets scrolled after the dialog displays, it will no longer be centered. It's possible to unintentionally cause the viewport to scroll by adding/removing content from the page. You can recenter the dialog window during scroll/resize events by calling:
如果您的视口在对话框显示后滚动，它将不再居中。通过从页面添加/删除内容，可能会无意中导致视口滚动。您可以通过调用在滚动/调整大小事件期间重新定位对话框窗口：
$('my-selector').dialog('option', 'position', 'center');
回答by Eugenio Miró
回答by jfraser
Digging up an old grave here but for new Google searchers.
在这里挖掘一个旧坟墓，但对于新的谷歌搜索者来说。
You can maintain the position of the model window when the users scrolls by adding this event to your dialog. This will change it from absolutely positioned to fixed. No need to monitor scrolling events.
通过将此事件添加到对话框中，您可以在用户滚动时保持模型窗口的位置。这会将其从绝对定位更改为固定。无需监视滚动事件。
open: function(event, ui) {
$(this).parent().css('position', 'fixed');
}
回答by coryvb123
I was having the same problem. It ended up being the jquery.dimensions.jsplugin. If I removed it, everything worked fine. I included it because of another plugin that required it, however I found out from the link herethat dimensions was included in the jQuery core quite a while ago (http://api.jquery.com/category/dimensions). You should be ok simply getting rid of the dimensions plugin.
我遇到了同样的问题。它最终成为jquery.dimensions.js插件。如果我删除它，一切正常。我将它包含在内是因为另一个需要它的插件，但是我从这里的链接中发现尺寸很久以前就包含在 jQuery 核心中（http://api.jquery.com/category/dimensions）。你应该可以简单地摆脱维度插件。
回答by Stefan Kendall
1.) The jQuery dialog centers in whatever element you put it in.
1.) jQuery 对话框以您放入的任何元素为中心。
Without more information, my guess is that you have a body div with a margin or something of the like. Move the popup div to the body level, and you'll be good to go.
没有更多信息，我的猜测是您有一个带有边距或类似内容的 body div。将弹出 div 移动到正文级别，您就可以开始了。
2.) If you dynamically add content to the div as you load it, centering will NOT be correct. Do NOT display the div until you have the data your'e putting in it.
2.) 如果您在加载时动态地向 div 添加内容，则居中将不正确。在您将数据放入之前不要显示 div。
回答by Rajkishor Sahu
Simply add below CSS line in same page.
只需在同一页面中添加以下 CSS 行即可。
.ui-dialog
{
position:fixed;
}
回答by user781058
To fix this issue I made sure my body height was set to 100%.
为了解决这个问题，我确保我的身高设置为 100%。
body { height:100% }
This also maintains the center position while the user scrolls.
这也会在用户滚动时保持中心位置。
回答by Taksh
Add this to your dialog declaration
将此添加到您的对话框声明中
my: "center",
at: "center",
of: window
Example :
例子 ：
$("#dialog").dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
my: "center",
at: "center",
of: window
})
回答by Rob Willis
This issue is often related to opening the dialog via an anchor tag (<a href='#' id='openButton'>Open</a>) and not preventing the default browser behaviour in the handler e.g.
此问题通常与通过锚标记 ( <a href='#' id='openButton'>Open</a>)打开对话框有关，并且不会阻止处理程序中的默认浏览器行为，例如
$('#openButton').click(function(event) {
event.preventDefault();
//open dialog code...
});
This usually removes the need for any positioning / scrolling plugins.
这通常不需要任何定位/滚动插件。
回答by Eswar
For me jquery.dimensions.js was the Culprit
对我来说 jquery.dimensions.js 是罪魁祸首
