Question

我是p：对话框的问题。

这里是代码：

        <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>

这是一个简单的登录表单。问题是，当我调整网页大小时，对话框已修复，并且不会跟随页面移动，与图片不同。

我怎么做？

Answer 1

我建议用css代替jquery。在这种情况下，jquery resize事件可能导致性能滞后。

Answer 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被h:form元素包含并且已定义了ID，则需要更改上面的一行脚本
```
var dialog = document.getElementById("yourFormId:loginDialog");
```
如果您的网页也垂直调整大小，则需要设置/计算p：对话框高度并在JavaScript函数中应用其他行
```
dialog.style.top = ((windowHeight-dialogHeight)/2)+"px"
```

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

2 个答案: