调整页面大小时更改位置 p：对话框答案

【问题标题】：Change position p:dialog when I resize the page调整页面大小时更改位置 p：对话框
【发布时间】：2017-11-15 13:44:49
【问题描述】：

我的 p:dialog 有问题。

代码如下：

        <p:dialog id="loginDialog" header="Login" width="400" widgetVar="dlg" visible="true"
            rendered="#{loginBean.f_loginRendered}" closable="false" showEffect="clip" draggable="false" resizable="false"
            style="box-shadow: 7px 10px 5px #303030; position:absolute;">
            <h:panelGrid id="panelGrid" columns="2" cellpadding="5" style="margin: 0 auto;">
                <h:outputLabel for="username" value="Username: *" />
                <p:inputText id="username" value="#{loginBean.f_username}" required="true" label="Username"/>
                <h:outputLabel for="password" value="Password: *" />
                <p:password id="password" value="#{loginBean.f_password}" required="true" label="Password"/>

<center>            <p:commandButton id="loginButton" value="Login" update="globalGrowl" actionListener="#{loginBean.checkDown}" /> </center>
        </h:panelGrid > 

        </p:dialog>

这是一个简单的登录表单。问题是当我调整网页大小时，对话框是固定的，它不会跟随页面移动，不像图片。

我该怎么做？

【问题讨论】：

不像什么图片？哦，顺便说一句，你的风格有position:absolute！！！

标签： jquery jsf login primefaces dialog

【解决方案1】：

我会建议用 css 而不是 jquery 来放置它。在这种情况下，jquery resize 事件可能会导致性能滞后。

【讨论】：

【解决方案2】：

如果您的网页仅在水平方向调整大小，您可以使用 JavaScript 将这段代码添加到页面的 h:body 元素中

<script type="text/javascript">
            window.onresize = function(event) {
                console.log("Screen is resized");
                var dialog = document.getElementById("loginDialog");
                var windowHeight=window.innerHeight;
                var windowWidth=window.innerWidth;
                console.log("Window W/H=" + windowWidth + "/" + windowHeight);
                //width of your dialog set in p:dialog 
                var dialogWidth=400;
                //position your dialog x px left from browser window left border
                dialog.style.left=((windowWidth-dialogWidth)/2)+"px"
            }
</script>

注意

如果您的p:dialog 被定义了id 的h:form 元素包裹，您将需要像这样更改上面的一行脚本
```
var dialog = document.getElementById("yourFormId:loginDialog");
```
如果您的网页也在垂直调整大小，您将需要设置/计算 p:dialog 高度并在 JavaScript 函数中应用附加行
```
dialog.style.top = ((windowHeight-dialogHeight)/2)+"px"
```

【讨论】：