• Settings
    • Locale
    • Change the locale of the datepicker, schedule and client side validation messages.

      Language
      English
      English
      English
      French
      German
      German
      German
      Italian
      Korean
      Spanish
      Catalan
      Dutch
      Portuguese
      Portuguese
      Arabic
      Arabic
      Bulgarian
      Bangla
      Bosnian
      Czech
      Greek
      Estonian
      Persian
      Finnish
      Danish
      Hindi
      Indonesian
      Icelandic
      Croatian
      Japanese
      Hungarian
      Hebrew
      Georgian
      Central Kurdish
      Khmer
      Kyrgyz
      Kazakh
      Lithuanian
      Latvian
      Malay
      Norwegian
      Polish
      Romanian
      Russian
      Slovak
      Slovenian
      Serbian
      Serbian
      Swedish
      Thai
      Turkish
      Ukrainian
      Uzbek
      Vietnamese
      Chinese
      Chinese
  • Resources

Overlay Panel

OverlayPanel is a generic container component that can overlay other components on page. Notable features are custom positioning, configurable events and effects. Lazy content loading to reduce page load time is also supported via dynamic option, when enabled overlayPanel will load the contents just before being shown.

OverlayPanel Tag Documentation

OverlayPanel is a generic container component that is displayed as a popup.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar String false generated ('widget_' + componentClientId) Name of the client side widget.
appendTo String false Component to append overlay panel to.
at String false left bottom Position of the target element.
autoHide boolean false true When true, overlay panel automatically hides when clicking outside.
blockScroll boolean false false When true, blocks scrolling when overlay panel is shown.
cache boolean false true When true, overlay panel content is cached.
collision String false flip When the overlay panel collides with the viewport, it will be repositioned.
dismissable boolean false true When true, overlay panel can be dismissed by clicking outside of it.
dynamic boolean false false When true, overlay panel content is loaded dynamically.
for String false Target component to attach overlay panel to.
hideEvent String false click Event name to hide the overlay panel.
modal boolean false false When true, overlay panel is displayed as modal.
my String false left top Position of the overlay panel relative to the target.
onHide String false Client-side callback to execute when overlay panel is hidden.
onShow String false Client-side callback to execute when overlay panel is shown.
showCloseIcon boolean false false When true, displays a close icon.
showDelay int false 0 Delay in milliseconds before showing the overlay panel.
showEvent String false click Event name to show the overlay panel.
style String false Inline style of the component.
styleClass String false Style class of the component.
Loading...
Tag DocumentationNew DocumentationNew Documentation JSDoc
Basic

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Images
SplitButton

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

AutoHide (false)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Choose Data
Data Iteration
CodeNameCategoryQuantity
f230fh0g3Bamboo WatchAccessories24
nvklal433Black WatchAccessories61
zz21cz3c1Blue BandFitness2
244wgerg2Blue T-ShirtClothing25
h456wer53BraceletAccessories73
av2231fwgBrown PurseAccessories0
bib36pfvmChakra BraceletAccessories5
mbvjkgip5Galaxy EarringsAccessories23
vbb124btrGame ControllerElectronics2
cm230f032Gaming SetElectronics63

Usage


<div class="card">
    <h:form id="form">
        <h5>Basic</h5>
        <p:commandButton id="basic" value="Show" type="button"/>
        <p:overlayPanel for="basic" style="width:350px">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </p:overlayPanel>

        <h5>Images</h5>
        <p:commandButton id="images" type="button" icon="pi pi-image" />
        <p:overlayPanel for="images" dismissable="false" showCloseIcon="true">
            <p:imageSwitch effect="fade">
                <ui:repeat value="#{imageSwitchView.images}" var="image">
                    <p:graphicImage name="/demo/images/nature/#{image}"/>
                </ui:repeat>
            </p:imageSwitch>
        </p:overlayPanel>

        <h5>SplitButton</h5>
        <p:splitButton id="split" value="SplitButton">
            <p:overlayPanel style="width:350px">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p:overlayPanel>
        </p:splitButton>

        <h5>AutoHide (false)</h5>
        <p:inputText id="autohide" value="Hover Me" />
        <p:overlayPanel for="autohide" style="width:350px" showEvent="mouseover" hideEvent="mouseout" autoHide="false">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </p:overlayPanel>

        <h5>Choose Data</h5>
        <p:growl id="msgs" showDetail="true" />

        <p:commandButton id="movieBtn" value="Find" type="button" icon="pi pi-search" />
        <p:overlayPanel for="movieBtn" dynamic="true" style="width:600px" widgetVar="moviePicker">
            <p:dataTable var="movie" value="#{movieView.movieList}" rows="5" paginator="true" selectionMode="single"
                selection="#{movieView.movie}" rowKey="#{movie.movie}">
                <p:ajax event="rowSelect" listener="#{movieView.onRowSelect}" update=":form:msgs" oncomplete="PF('moviePicker').hide()"/>

                <p:column headerText="Movie">
                    <h:outputText value="#{movie.movie}"/>
                </p:column>

                <p:column headerText="Directed By">
                    <h:outputText value="#{movie.directedBy}"/>
                </p:column>

                <p:column headerText="Genres">
                    <h:outputText value="#{movie.genres}"/>
                </p:column>

                <p:column headerText="Run Time(min.)">
                    <h:outputText value="#{movie.runTime}"/>
                </p:column>
            </p:dataTable>
        </p:overlayPanel>

        <h5>Data Iteration</h5>
        <p:dataTable id="basicDT" var="product" value="#{dtSelectionView.products1}">
            <p:column style="width:32px;text-align: center">
                <p:commandButton update=":form:productDetail" styleClass="ui-button-flat"
                                 oncomplete="PF('productOP').show('#{component.clientId}')"
                                 icon="pi pi-search" title="View">
                    <f:setPropertyActionListener value="#{product}"
                                                 target="#{dtSelectionView.selectedProduct}"/>
                </p:commandButton>
            </p:column>
            <p:column headerText="Code">
                <h:outputText value="#{product.code}"/>
            </p:column>
            <p:column headerText="Name">
                <h:outputText value="#{product.name}"/>
            </p:column>
            <p:column headerText="Category">
                <h:outputText value="#{product.category}"/>
            </p:column>
            <p:column headerText="Quantity">
                <h:outputText value="#{product.quantity}"/>
            </p:column>
        </p:dataTable>

        <p:overlayPanel widgetVar="productOP" dismissable="false" showCloseIcon="true" dynamic="true">
            <p:outputPanel id="productDetail" style="text-align:center;">
                <p:column rendered="#{not empty dtSelectionView.selectedProduct}">
                    <div class="product">
                        <div class="product-grid-item p-3 border-0">
                            <div class="product-grid-item-top">
                                <div>
                                    <i class="pi pi-tag product-category-icon"/>
                                    <span class="product-category">#{dtSelectionView.selectedProduct.category}</span>
                                </div>
                                <span class="product-badge status-#{dtSelectionView.selectedProduct.inventoryStatus.name().toLowerCase()}">#{dtSelectionView.selectedProduct.inventoryStatus.text}</span>
                            </div>
                            <div class="product-grid-item-content">
                                <p:graphicImage
                                        name="demo/images/product/#{dtSelectionView.selectedProduct.image}"/>
                                <div class="product-name">#{dtSelectionView.selectedProduct.name}</div>
                                <div class="product-description">#{dtSelectionView.selectedProduct.description}</div>
                                <p:rating readonly="true" value="#{dtSelectionView.selectedProduct.rating}"/>
                            </div>
                            <div class="product-grid-item-bottom">
                                <h:outputText value="#{dtSelectionView.selectedProduct.price}"
                                              styleClass="product-price">
                                    <f:convertNumber currencySymbol="$" type="currency"/>
                                </h:outputText>
                                <p:commandButton value="Add To Cart" icon="pi pi-shopping-cart"
                                                 disabled="#{dtSelectionView.selectedProduct.inventoryStatus == 'OUTOFSTOCK'}">
                                </p:commandButton>
                            </div>
                        </div>
                    </div>
                </p:column>
            </p:outputPanel>
        </p:overlayPanel>

    </h:form>
</div>