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 component may also be used with the autoCentre, and autoPosition attributes to cause the popup to stick to either the centre of the viewable port of the browser window, or to the position specified in pixels from the top left of the window.

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>

The following code shows how a popup using the autoCentre attribute can be created:

<ice:panelPopup id="autoCentrePP"
        draggable="true"
        rendered="#{popup.showAutoCentrePanel}"
        visible="#{popup.showAutoCentrePanel}"
        autoCentre="true"
        style="z-index: 1000;width: 300px; height: 150px;">

    <f:facet name="header">
        <ice:panelGrid id="autoCentPanelGrid"
                       width="100%" cellpadding="0"
                       cellspacing="0" columns="2"
                       columnClasses="none, popupButton">
            <ice:outputText value="Auto-Centre Popup Panel"/>
            <ice:commandButton id="autoCentPopupClose" type="button"
                               image="#{popup.closePopupImage}"
                               actionListener="#{popup.closeAutoCentrePopup}"
                               style="cursor: pointer;"/>
        </ice:panelGrid>
    </f:facet>

    <f:facet name="body">
        <ice:panelGrid id="autoCentContent"
                       width="100%" cellpadding="0"
                       cellspacing="0" columns="1"
                       styleClass="popupModalBody">
            <ice:outputText
                    value="This Popup will remain centred even if you scroll or resize the window."/>
        </ice:panelGrid>
    </f:facet>

</ice:panelPopup>

The following code shows how a popup using the autoPosition attribute can be created:

<ice:panelPopup id="autoPositionPP"
        draggable="true"
        rendered="#{popup.showAutoPositionPanel}"
        visible="#{popup.showAutoPositionPanel}"
        style="z-index: 1000;width: 300px; height: 150px;"
        autoPosition="#{popup.autoPositionInput}">

    <f:facet name="header">
        <ice:panelGrid id="autoPosPanelGrid"
                       width="100%" cellpadding="0"
                       cellspacing="0" columns="2"
                       columnClasses="none, popupButton">
            <ice:outputText value="Auto-Position Popup Panel"/>
            <ice:commandButton id="autoPosPopupClose" type="button"
                               image="#{popup.closePopupImage}"
                               actionListener="#{popup.closeAutoPositionPopup}"
                               style="cursor: pointer;"/>
        </ice:panelGrid>
    </f:facet>

    <f:facet name="body">
        <ice:panelGrid id="autoPosContent"
                       width="100%" cellpadding="0"
                       cellspacing="0" columns="1"
                       styleClass="popupModalBody">
            <ice:outputText
                    value="This Popup will remain in the specified position even if you scroll or resize the window."/>
        </ice:panelGrid>
    </f:facet>

</ice:panelPopup>