Question

我正在所有页面上使用模板文件。其中一个页面上有一个对话框。但是，当对话框弹出时，它将进入模板标题下。

我已经处理过 Z-INDEX ，但是对于任何z-index来说，它都不是固定的。这是我的代码。

myPage.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                template="template.xhtml">

    <ui:define name="content">
        <div style="text-align: center;"></div>
        <style type="text/css">
            .imagebox a {
                margin-left: 10px;
            }

            .ui-tree {
                width: auto!important;
            }
        </style>

        <h:form id="galary" style="">
        <div style="float: left;width: 80%;margin-left: 2%;margin-top:2%; position: relative;">

                <p:dataGrid var="image" value="#{Gallery.images}" columns="8" layout="grid" paginator="true" id="cars"
                            style="margin: auto;" rows="24"
                            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                            rowsPerPageTemplate="6,12,16">

                    <p:commandLink update=":testDialog" action="#{Gallery.selectImage(image)}" type="button"
                                   oncomplete="PF('dlg1').show();">
                        <p:panel style="text-align:center">
                            <p:graphicImage value="#{request.contextPath}/gal_img_thumb/#{image}" width="100"
                                            height="100"/>
                        </p:panel>
                    </p:commandLink>

                </p:dataGrid>

            </div>
        </h:form>
        <p:dialog style="position: absolute; z-index: 101!important;" header="Basic Dialog" widgetVar="dlg1" minHeight="40">
            <h:form id="cnf">
                    <p:graphicImage value="https://www.gstatic.com/webp/gallery3/1.sm.png" />
                </h:form>
        </p:dialog>

    </ui:define>

myTemplate.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://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">


    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=9"/>
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
            <meta http-equiv="PRAGMA" content="NO-CACHE"/>
            <meta http-equiv="CACHE-CONTROL" content="NO-CACHE"/>
            <meta http-equiv="EXPIRES" content="0"/>
            <link rel="icon"
                  type="image/png"/>
            <title>myWebApplication</title>

        </f:facet>

        <style type="text/css">
            .ui-layout-north{z-index: 100!important;}
        </style>
    </h:head>

    <h:body style="font-size: 70%;width: 80%!important;">


        <p:layout fullPage="true" resizeTitle="resize">

            <p:layoutUnit position="north" size="150"  id="north">
                <ui:include src="header.xhtml"/>
            </p:layoutUnit>


            <p:layoutUnit position="center"  >
                <ui:insert name="content" >

                </ui:insert>
            </p:layoutUnit>

            <p:layoutUnit position="south" size="21" style="padding:0;">
                <h:outputText value="This is footer" styleClass="copyrigth"/>
            </p:layoutUnit>

        </p:layout>

    </h:body>

</html>

更新：如果我从模板文件中的 .ui-layout-north {z-index：100！important;} 行中删除了重要标记，则此问题将得到解决，但下拉列表将显示在页面下方。

请帮助我解决此问题。注意-由于模板正在使用其他页面，因此我无法对模板文件进行大的更改。

谢谢。

如何使用p：layout在页面中所有项目上方显示一个对话框？

0 个答案: