Question

Primefaces展示的modalDialog基本实现对我不起作用。这是我正在处理的完整index.xhtml。有一个简单的按钮触发模态对话框来显示一些内容，不幸的是，这没有按预期工作。

的index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xml:lang="en" lang="en">
<h:head>
    <title>GG Well Trade</title>
</h:head>
<h:body>



    <p:layout fullPage="true">



        <p:layoutUnit position="north" style="border: hidden; height: 30%">

            <p:panelGrid columns="2" style="width: 100%; border: hidden" styleClass="ui-panelgrid-blank">

                <p:fieldset legend="[H]ave">
                    <p:panelGrid columns="5" style="border: hidden; width: 100%" styleClass="ui-panelgrid-blank">
                        <p:panelGrid>
                            <p:outputLabel value="Item name" for="haveName"/>
                            <br/>
                            <p:autoComplete id="haveName" minQueryLength="5" effect="fade" />
                        </p:panelGrid>

                        <p:panelGrid>
                            <p:outputLabel value="Paint" for="havePaint" />
                            <br/>
                            <p:autoComplete id="havePaint" minQueryLength="5" effect="fade" />
                        </p:panelGrid>

                        <p:panelGrid>
                            <p:outputLabel value="Certification" for="haveCert" />
                            <br/>
                            <p:autoComplete id="haveCert" minQueryLength="5" effect="fade" />
                        </p:panelGrid>
                    </p:panelGrid>
                </p:fieldset>

                <p:fieldset legend="[W]ant">
                    <p:panelGrid columns="5" style="border: hidden; width: 100%" styleClass="ui-panelgrid-blank">
                        <p:panelGrid>
                            <p:outputLabel value="Item name" for="wantName"/>
                            <br/>
                            <p:autoComplete id="wantName" minQueryLength="5" effect="fade" />
                        </p:panelGrid>

                        <p:panelGrid>
                            <p:outputLabel value="Paint" for="wantPaint" />
                            <br/>
                            <p:autoComplete id="wantPaint" minQueryLength="5" effect="fade" />
                        </p:panelGrid>

                        <p:panelGrid>
                            <p:outputLabel value="Certification" for="wantCert" />
                            <br/>
                            <p:autoComplete id="wantCert" minQueryLength="5" effect="fade" />
                        </p:panelGrid>
                    </p:panelGrid>
                </p:fieldset>

            </p:panelGrid>

            <center>
                <br/>
                <p:commandButton value="Start" actionListener="#{bean.start()}" style="width: 100px"/>
                <p:commandButton value="Stop" actionListener="#{bean.stop()}" style="width: 100px"/>

            </center>




        </p:layoutUnit>

        <p:layoutUnit position="south" size="300" header="Credits" style="border: hidden">
            <p:commandButton value="How to" type="button" onclick="PF('dlg').show();" />

            <p:dialog header="How to..." id="tutorial" widgetVar="dlg" modal="true" width="100" height="100">
                <h:outputText value="This is a Modal Dialog." />
            </p:dialog>
        </p:layoutUnit>

        <p:layoutUnit position="center" style="border: hidden">
            <h:form>
                <p:socket channel="/notify">
                    <p:ajax event="message" update="tradeList"/>
                </p:socket>

                <p:dataTable var="item" value="#{bean.items}" id="tradeList">
                    <p:column headerText="Site" style="width: 80px">
                        <h:outputText value="#{item.value}" />
                    </p:column>

                    <p:column headerText="Platform" style="width: 80px">
                        <h:outputText value="#{item.label}" />
                    </p:column>

                    <p:column headerText="User" style="width: 150px">
                        <h:outputText value="//" />
                    </p:column>

                    <p:column headerText="Have">
                        <h:outputText value="//" />
                    </p:column>

                    <p:column headerText="Want">
                        <h:outputText value="//" />
                    </p:column>

                    <p:column headerText="Notes">
                        <h:outputText value="//" />
                    </p:column>
                </p:dataTable>
            </h:form>
        </p:layoutUnit>

    </p:layout>

</h:body>
</html>

显示tutorial dialog＆＃34;＆＃34;主要布局，为什么？我试过把它放在外面，但它也一样。我该如何解决这个问题？

p：对话框显示在我的p：layout下

0 个答案: