86

RichFaces <rich:popupPanel>

This component provides a pop-up panel that appears in front of the web page. It can be positioned on the screen, dragged to a new position and re-sized by the user.

It does not require any compulsory attribute.

Style classes and skin parameters

The following table contains the Style classes (selectors) and corresponding skin parameters for the popupPanel.

Class	Function	Skin Parameters	Mapped CSS properties
.rf-pp-btn	It is used to define styles for the pop-up panel button.	No skin parameters.
.rf-pp-shade	It is used to define styles for the shading that covers the page when presenting a modal pop-up panel.	No skin parameters.
.rf-pp-cntr	It is used to define styles for the container for the pop-up panel.	panelBorderColor generalBackgroundColor	border background
.rf-pp-hdr	It is used to define styles for the header of the pop-up panel.	headerBackgroundColor	background
.rf-pp-hdr-cnt	It is used to define styles for the content of the header.	headerTextColor headerWeightFont	color font-weight
.rf-pp-cnt	It is used to define styles for the content of the pop-up panel.	generalFamilyFont generalSizeFont	font-size background
.rf-pp-cnt-scrlr	It is used to define styles for the scroll bars of the pop-up panel.	generalBackgroundColor	background
.rf-pp-hndlr	It is used to define styles for borders of the pop-up panel. The border handler is used to re-size the panel.	No skin parameters.
.rf-pp-hndlr-t, .rf-pp-hndlr-b, .rf-pp-hndlr-l, .rf-pp-hndlr-r, .rf-pp-hndlr-tl, .rf-pp-hndlr-tr, .rf-pp-hndlr-bl, .rf-pp-hndlr-br	These classes define styles for the top, bottom, left, right, top-left, top-right, bottom-left, and bottom-right edges of the border handler.	No skin parameters.

---

Example

Here, in the following example, we are implementing <rich:popupPanel> component. This example contains the following files.

JSF File

// rich-popup.xhtml

Output:

After clicking on the pop-up link.

---