Question

I’d like to place a whole page inside a PrimeFaces library UI component lightBox.

For example I have:

• Normal_page.xhtml
• Popup_page.xhtml

Is it possible to launch Popup_page.xhtml from Normal_page.xhtml and display it inside lightBox so that Popup_page would be overlayed over Normal_page?

p.s.

I used to do this using <p:dialog> and <ui:include>, like so:

<p:dialog widgetVar="myPopup"...> 
    <ui:include src="/Popup_page.xhtml"/>
</p:dialog>

and

<p:commandButton onclick="myPopup.show();"/>

but this doesn’t seem to work with <p:lightBox>.

Answer 1

Both of these methods worked for me:

LightBox inline method:

<p:lightBox>
    <h:outputLink value="#">  
        <h:outputText value="Open Lightbox Popup (using inline)"/>  
    </h:outputLink>   
    <f:facet name="inline">
        <ui:include src="popup_Page.xhtml"/>
    </f:facet>
</p:lightBox>

LightBox iframe method:

<p:lightBox iframe="true">      
    <h:outputLink value="popup_Page.xhtml">  
        <h:outputText value="Open Lightbox Popup (using iframe)"/>  
    </h:outputLink>   
</p:lightBox>