The rich:popupPanel component is used to create any kind of popups on the page.
Main features:
This example shows a simple non-modal popup which is movable but not resizable and defined to use autosizing according to it's content
Any content might be inside this panel.
The popup panel is open and closed from the javascript function of component client side object. The following code hide this panel: #{rich:component('popup')}.hide()
<!DOCTYPE html> <ui:composition 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:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <h:commandButton value="Call the popup"> <rich:componentControl target="popup" operation="show" /> </h:commandButton> <rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false"> <f:facet name="header"> <h:outputText value="Simple popup panel" /> </f:facet> <f:facet name="controls"> <h:outputLink value="#" onclick="#{rich:component('popup')}.hide(); return false;" style="color: inherit"> X </h:outputLink> </f:facet> <p>Any content might be inside this panel.</p> <p> The popup panel is open and closed from the javascript function of component client side object. The following code <a href="#" onclick="#{rich:component('popup')}.hide()">hide this panel</a>: <f:verbatim>#</f:verbatim>{rich:component('popup')}.hide() </p> </rich:popupPanel> </ui:composition>
This example also shows two variants of working with the component JavaScript API:
