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不能具有相同的名称。与this post

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>

使用它你将表单“手动附加”到正文，因此不需要将body的append设置为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()，您的提法似乎不起作用。

Primefaces：如果关闭对话框，则使用modal = true取消激活背景

2 个答案:

mainTemplate：XHTML：

someXhtml.xhtml