用另一个模态p:dialog覆盖模态p:dialog

时间:2019-06-11 17:16:49

标签: jsf primefaces

首先-我是PrimeFaces的新手,我试图在另一个已经生成的对话框顶部显示警告对话框。

查看代码看起来像(简化):

    <p:dialog id="userDialog" header="User Account" widgetVar="userDialogView" modal="true" resizable="true" closable="fasle" showHeader="true" height="400" width="880px">
        <h:form id="dataDialogForm">
         ...
        </h:form>
    </p:dialog>

    <p:dialog id="warnDialog" header="Warning!" widgetVar="warnDialog" modal="true" appendTo="@(body)" height="300px" width="600px" resizable="false">
        <h:outputText value="You are trying to delete. Do you want to proceed? Yes/No" />
    </p:dialog>

warnDialog的生成器控制器

RequestContext.getCurrentInstance().execute("showDialog('warnDialog')");

warnDialog的生成正确,但是显示在userDialog对话框下,而不是它的顶部。

应用正在使用PrimeFaces v6.0 org.primefaces.webapp.PostConstructApplicationEventListener.processEvent Running on PrimeFaces 6.0

编辑:

经过测试的confirmDialog代码(经过简化)类似于:

    <p:dialog id="userDialog" header="User Account" widgetVar="userDialogView" modal="true" resizable="true" closable="fasle" showHeader="true" height="400" width="880px">
        <h:form id="dataDialogForm">
         ...
        <p:confirmDialog widgetVar="warnDialog" header="Confirmation" severity="warn" modal="true" resizable="false" position="top,left">
                <f:facet name="message">
                    You are trying to delete. Do you want to proceed?
                </f:facet>
                <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="pi pi-check" />
                <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="pi pi-times" />
            </p:confirmDialog>

        </h:form>
    </p:dialog>

没有在userDialog上产生阻塞叠加层,也没有定位在视口的左上角,也没有定位在触发confirmDialog的元素上。

1 个答案:

答案 0 :(得分:1)

我已经通过覆盖PrimeFaces CSS解决了我的问题,由于某些原因,该CSS在版本5.x和6.x中没有正确处理覆盖对话框(与普通jQuery UI或Bootstrap相比)。

我的解决方案如下:

QTextFragment

及其CSS:

<p:dialog id="userDialog" header="User Account" widgetVar="userDialogView" modal="true" resizable="true" closable="fasle" showHeader="true" height="400" width="880px">
    <h:form id="dataDialogForm">
     ...
    </h:form>
</p:dialog>

<p:dialog id="warnDialog" header="Warning!" widgetVar="warnDialog" modal="true" height="300px" width="600px" resizable="false" styleClass="dialogWarn-fix">
    <h:outputText value="You are trying to delete. Do you want to proceed? Yes/No" />
</p:dialog>