panelPopup

The panelPopup is a container component that renders a popup panel that hovers on top of a web page.

The popupPanel contains two user defined regions which are defined using named facets. The facet names are "header" and "body".

This component provides general popup window behavior such as draggable and modal.

The panelPopup component may be used in cases where a a popup window is appropriate.

The following code shows how a modal popup with a header can be created:

<ice:panelPopup styleClass="panelPopup"
	modal="true"
	rendered="true"
	visible="#{popupBean.showPopup2}"
	style="z-index:999; top: 400px; left: 400px; width: 300px; height: 200px; position:absolute; background: #FFFFFF;">

	<f:facet name="header">
		<h:panelGrid id="popupHeader2" width="100%" cellpadding="0" cellspacing="0" columns="3" columnClasses="popupIcon,popupTitle,popupButton">
			<h:graphicImage id="popupIcon2" value="#{popupBean.popupIcon}" />
			<h:outputText value="ICEfaces Popup Demo"/>
			<h:commandButton id="popupClose2" type="button" image="#{popupBean.closePopupImage}"
				action="#{popupBean.closePopup2}" style="cursor: pointer;"/>
		</h:panelGrid>
	</f:facet>


	<f:facet name="body">
		<h:panelGrid id="popupBody2" width="100%" cellpadding="0" cellspacing="0" column="1">
			<h:outputText value="This Modal Popup is not draggable. It can only be closed using one of the the Close buttons." />
			<h:commandButton id="closeModal" action="#{popupBean.togglePopup2}" value="Close" style="z-index:2;"/>
		</h:panelGrid>
	</f:facet>

</ice:panelPopup>

The following code shows how a draggable popup with a header can be created:

<ice:panelPopup styleClass="panelPopup"
	draggable="true"
	rendered="true"
	visible="#{popupBean.showPopup2}"
	style="z-index:999; top: 400px; left: 400px; width: 300px; height: 200px; position:absolute; background: #FFFFFF;">

	<f:facet name="header">
		<h:panelGrid id="popupHeader2" width="100%" cellpadding="0" cellspacing="0" columns="3" columnClasses="popupIcon,popupTitle,popupButton">
			<h:graphicImage id="popupIcon2" value="#{popupBean.popupIcon}" />
			<h:outputText value="ICEfaces Popup Demo"/>
			<h:commandButton id="popupClose2" type="button" image="#{popupBean.closePopupImage}"
				action="#{popupBean.closePopup2}" style="cursor: pointer;"/>
		</h:panelGrid>
	</f:facet>


	<f:facet name="body">
		<h:panelGrid id="popupBody2" width="100%" cellpadding="0" cellspacing="0" column="1">
			<h:outputText value="This Popup is draggable." />
			<h:commandButton id="closeModal" action="#{popupBean.togglePopup2}" value="Close" style="z-index:2;"/>
		</h:panelGrid>
	</f:facet>

</ice:panelPopup>