Primefaces:如果关闭对话框，背景将被禁用，model=true

Question

我在对话框中使用modal= true和appendToBody=true，它在Chrome和Firefox中运行良好，但在IE8中运行不好。对话框显示，但如果我关闭对话框，背景仍然是蓝色的，因为modal=true，但我必须使用它。

这是我的代码：

  <ui:composition template="../templates/site.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:sec="http://www.springframework.org/security/tags">
    <ui:define name="content">
        <h:form id="form">
            <p:commandButton value="Button" type="button" id="myButton"
                onclick="form:testDialog.show()" />

        <p:dialog id="testDialog" widgetVar="testDialog"
            header="My Test Dialog" modal="true" appendToBody="true">
            <h:form>
                <p:fieldset legend="Dialog">
                    <p:spacer height="30" />

                </p:fieldset>
            </h:form>
        </p:dialog>
        </h:form>
    </ui:define>
</ui:composition>

编辑：

问题出在对话框的命名上。ID和widgetVar不能具有相同的名称。与此相关的

Answer 1

您在模板文件中使用<p:layout>吗？

当我混合布局和模式对话框时，我总是会遇到问题。

在我的父模板中，我通常使用<ui:insert>:定义一个空间来放置模式对话框

mainTemplate:xhtml:

<h:body>
    <p:layout>
        <p:layoutUnit position="cemter">
            <ui:insert name="content"/>
        </p:layoutUnit>
    <p:layout>
    <ui:insert name="dialogs"/>
</h:body>

someXhtml.xhtml

<ui:composition template="mainTemplate.xhtml">
    <ui:define name="content">
        bla bla bla
    </ui:define>
    <ui:define name="dialogs">
        <p:dialog modal="true" appendToBody="false">
            ....
        </p:dialog>
    </ui:define>
</ui:composition>

使用它，您可以将表单"手动附加"到正文，因此不需要将"附加到正文"设置为true。这允许我在任何xhtml页面中插入表单，而不用担心布局中的模态表单。

Answer 2

这里有嵌套的表单，这在HTML中是不允许的。尝试在按钮后和对话框前立即关闭第一家公司：

<h:form id="form">
  <p:commandButton value="Button" type="button" id="myButton"
      onclick="testDialog.show()"/>
</h:form>
<p:dialog id="testDialog" widgetVar="testDialog"
    header="My Test Dialog" modal="true" appendToBody="true">
  <h:form>
    <p:fieldset legend="Dialog">
      <p:spacer height="30" />
    </p:fieldset>
  </h:form>
</p:dialog>

我还将form:testDialog.show()更改为testDialog.show()，您的公式似乎不起作用。