jQuery 对话框不在视口中居中，而是在父元素中居中答案

【问题标题】：jQuery dialog does not center in viewport but parent elementjQuery 对话框不在视口中居中，而是在父元素中居中
【发布时间】：2012-09-20 21:13:53
【问题描述】：

我刚刚下载了 jQuery 1.8.0，也带有自定义的 CSS，并且正在尝试制作一个非常简单的 jQuery 对话框来工作，但是它不会在当前视口中居中，而是在父元素（主体）中并滚动视口对话框位于中心。

我包含了小部件和位置 js 文件并检查了路径是否正确。这就是我所拥有的：

<script src="js/js/jquery-1.8.0.min.js"></script>
<script src="js/js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="js/js/jquery.ui.position.js"></script>
<script src="js/js/jquery.ui.widget.js"></script>

HTML：

<div id="dialog-confirm" title="Empty the recycle bin?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

HTML 完全从 jQuery 网站复制而来。最后调用它：

var dialog_confirm=$( '#dialog-confirm' ).dialog();
dialog_confirm.dialog('open');

这些问题中的所有解决方案都没有为我解决：
Dialog box not positions center screen
jQuery center element to viewport using center plugin

有人知道如何解决这个问题吗？这是 jQuery 对话框的标准行为吗？我觉得很奇怪，还是我弄错了？

【问题讨论】：

你能把代码贴在你打电话给$("your-element").dialog({/*...*/);的地方吗？
请提供更多详细信息，使用jsfiddle.net 粘贴您的代码、html、js、css :)
@TJB：谢谢，更新了问题
@MarianZburlea：整页？包括所有的CSS？

标签： javascript jquery scroll viewport jquery-dialog

【解决方案1】：

我经历了从 jQuery 1.7/jQUI 1.8.17 到 jQuery 1.11/jQUI 1.9.2 的升级。（升级前对话框定位正常。）

在我的例子中，原因是一个旧的 doctype 触发了 quirks 模式，这导致 jQuery 返回 $(window).height 作为文档的高度而不是视口。切换到 HTML5 文档类型 (<!doctype html>) 解决了这个问题。

【讨论】：

这解决了我的对话框不在窗口中居中的问题。谢谢！

【解决方案2】：

如果可以，请尝试使用较旧的 jquery 版本，例如 1.7.x...这可能会解决问题。这不是常见的行为！

【讨论】：

谢谢！确实有效！所以，原因是 jQuery 1.8.0。