对话框不以窗口高度为中心，而是以文档高度为中心答案

【问题标题】：Dialog not centered on window height, but on document height instead对话框不以窗口高度为中心，而是以文档高度为中心
【发布时间】：2018-12-01 22:00:06
【问题描述】：

现在使用 primefaces 6.2，我在使用 6.0 时已经遇到了这个问题，所以我认为是时候进行调查了。当页面（文档）的内容高度大于窗口（浏览器的视口）时，您可以清楚地看到对话框不是以窗口为中心，而是以文档为中心。当页面非常大时，对话框仍然以页面级别为中心，而不是在窗口级别。这意味着如果页面至少是窗口的两倍高，则对话框会从窗口下降。为了测试这一点，我制作了一个示例页面：

<html lang="nl" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui">
<h:head>

</h:head>

<h:body>

    <h:form id="show">
        <p:commandButton value="Test" onclick="PF('dialog').show();" />
    </h:form>

    <p:dialog id="dialog" header="dialog" widgetVar="dialog" modal="true" height="100">

        <h:form id="refresh">
            <p:button onclick="document.location.href = document.location.href;" value="Refresh" />
        </h:form>

    </p:dialog>

    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>

</h:body>
</html>

在这个示例页面中，它将触发对话框。在大多数笔记本电脑上使用时，它会在中心很好地显示对话框，因为屏幕分辨率足够大。现在，调整浏览器屏幕的大小，直到出现滚动条。这意味着一些“测试”线应该从窗户上掉下来。现在再次触发对话框。就我而言，它不再居中。调整浏览器大小也没有效果...

奇怪的是，在 Primefaces 展示中测试它并调整屏幕大小时，对话框总是居中！结论是有一些不同，但我只对 primefaces 使用基本配置。我注意到虽然所有内容都包含在 primefaces 网站上的布局容器中。还尝试将所有内容包装在布局容器中，但没有帮助。

任何人都知道为什么会发生这种情况。这是我应该报告的错误吗？这是否符合设计，并且对话框将始终以文档为中心（出于奇怪的原因，展示不遵循此逻辑......）。

【问题讨论】：

我会尝试使用小型 PrimeFaces 测试项目创建一个可重现的测试用例，如果您可以重现它，将其作为缺陷提交。测试项目在这里：github.com/primefaces/primefaces-test

标签： jquery html css primefaces dialog

【解决方案1】：

我找到了解决方案：需要添加一个 doctype 声明：<!DOCTYPE html>。

虽然声明对于 XHTML5 文档不是强制性的；实际上，对于使用 primefaces，它是强制性的。否则，某些组件可能会出现意外行为，例如此对话框。

【讨论】：