JSF - Creating an overlay for popup panels.

Posted by Ben on Stack Overflow See other posts from Stack Overflow or by Ben
Published on 2010-05-24T14:21:45Z Indexed on 2010/05/25 10:01 UTC
Read the original article Hit count: 292

Filed under:
|
|
|

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) alt text

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!

© Stack Overflow or respective owner

Related posts about css

Related posts about AJAX