Question

我想要的是在页面加载后立即显示灯箱。我的意思是，当用户收到页面时，灯箱会自动显示并保持打开状态，直到用户关闭。我怎么能这样做？

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

<ui:composition template="/WEB-INF/include/template.xhtml">
    <ui:define name="title">
        <h:outputText value="#{jorBundle.AppName}"></h:outputText>
    </ui:define>
    <ui:define name="body">

        <p:lightBox width="20%" height="80%" >  
            <h:outputLink value="#" title="Marcel Vieira" >  
                <h:outputText value="some description here"/>  
            </h:outputLink>  

            <f:facet name="inline">  
                <h:panelGrid columns="2">  
                    <p:graphicImage value="/resources/images/ich.jpg" />  
                    <h:outputText style="color:#FFFFFF" value="some text in here...." />                                                                             
                </h:panelGrid>
            </f:facet>  
        </p:lightBox> 

        <p:panel header="#{jorBundle.Welcome}">
            <p><h:outputText value="#{jorBundle.WelcomeMessage}"></h:outputText></p>
        </p:panel>

        <p:panel header="Gráfico Divisões UPB" menuTitle="menu" collapsed="true" >
            <p><h:outputText value="Gráfico"></h:outputText></p>

        </p:panel>
    </ui:define>
</ui:composition>
</html>

提前致谢。

Answer 1

您可以使用primefaces javascript，这需要灯箱上的ID。

组件：

<p:lightBox width="20%" height="80%" id='myLightBox'>  
    <h:outputLink value="#" title="Marcel Vieira" >  
        <h:outputText value="some description here"/>  
    </h:outputLink>  

    <f:facet name="inline">  
        <h:panelGrid columns="2">  
            <p:graphicImage value="/resources/images/ich.jpg" />  
            <h:outputText style="color:#FFFFFF" value="some text in here...." />                                                                             
        </h:panelGrid>
    </f:facet>  
</p:lightBox>

使用Javascript：

<script>
    document.addEventListener("DOMContentLoaded", function() {
       PF('myLightBox').show();
    });
</script>

Answer 2

一个简单的解决方案是将visible属性设置为true：

<p:lightBox width="20%" height="80%" visible="true">  
        <h:outputLink value="#" title="Marcel Vieira" >  
            <h:outputText value="some description here"/>  
        </h:outputLink>  

        <f:facet name="inline">  
            <h:panelGrid columns="2">  
                <p:graphicImage value="/resources/images/ich.jpg" />  
                <h:outputText style="color:#FFFFFF" value="some text in here...." />                                                                             
            </h:panelGrid>
        </f:facet>  
    </p:lightBox>

如何在加载页面时自动显示Lightbox

2 个答案: