jsf - p :dialog appears on bottom when p:blockUI targets it

Question

我有一个 PrimeFaces 对话框，它有两个命令按钮，可以在支持 bean 中执行一些代码。我想阻止 Action 中的对话框。

我设法使用 blockUI 做到了这一点，但是当 blockUI 存在并且我打开对话框时，它出现在页面底部。

如果我删除 blockUI 组件，对话框会在页面中央打开，如我所愿。但我希望它居中并带有 blockUI。

        <p:dialog header="Attention" id="dialog" position="center"
            widgetVar="dialog" modal="true" closable="false"
            dynamic="true" closeOnEscape="false">

        <div class="internal-margin-top">

                <h:outputText value="Location" styleClass="ui-outputtext" />
                <p:inputText value="#{activityBean.location}"
                    id="inputLocation" maxlength="15">
                </p:inputText>

            </div>
            <div class="internal-margin-bottom">
                <p:commandButton id="closureYes" value="Yes"
                    styleClass="btn-green"
                    onstart="PF('block').show();"
                    oncomplete="PF('dialog').hide(); PF('block').hide();"
                    action="#{activityBean.processItem()}" process="@all">
                </p:commandButton>
                <p:commandButton id="closureNo" value="No"
                    styleClass="btn-red"
                    onstart="PF('block').show();"
                    oncomplete="PF('dialog').hide(); PF('block').hide();"
                    action="#{activityBean.processActivity()}" process="@all" />
            </div>
        </p:dialog>

            <p:blockUI block="scrapDialog" widgetVar="block">
                <p:graphicImage library="images" name="loading_bar.gif" />
            </p:blockUI>

提前致谢。

Answer 1

带有居中模式对话框的示例:

    <p:dialog header="Header" position="center" widgetVar="wv_dialog" modal="true" closable="false" dynamic="true" closeOnEscape="false">
        <h:form id="dialogform">
            <p:panelGrid columns="1">
                <p:inputText value="test"/>
                <p:inputText value="test"/>
                <p:inputText value="test"/>
                <p:inputText value="test"/>
            </p:panelGrid>
            <p:commandButton id="closebutton" 
                value="Close"
                oncomplete="PF('wv_dialog').hide();"
                action="#{testBean.actionTest()}"
                process="@form"/>
            <p:blockUI block="dialogform" trigger="closebutton"/>
        </h:form>
    </p:dialog>