JSF - Creating an overlay for popup panels.

Question

Hi,

I've created an overlay that will popup whenever someone wants to upload a file to the system. The Gui looks like this (when the overlay is up)

I have two problems with this:

1. I attached a a4j:support object that, onclick, makes the overlay disappear. The problem with this is that when I click the upload button on the upload component, support catches the click event and closes the overlay with the upload component before I have the chance to finish the operation.
2. I chose two different style classes. One for the overlay and one for the upload panel. But the styling of the overlay takes over the upload component and it becomes transparent as well.

The implementation looks something like this:

<h:panelgroup layout="block" styleClass="overlayClass">
  <rich:fileUpload styleClass="uploadStyleClass"... />
  <a4j:support event="onclick" action="#{mrBean.switchOverlayState}" reRender="..."/>
</h:panelGroup>

The CSS:

.overlayClass {
        Opacity: 0.5;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000;
}

.uploadStyleClass {
         opacity: 1.0;
         ...
}

Thanks for the help!

Answer 1

I'd suggest using <rich:modalPanel> instead.