Question

I’m using PrimeFaces 3.0 and JSF 2.0. In my webapp, I display a modal dialog over the page when the user’s browser has been idle for a certain length of time and this triggers a session invalidation on the server side via an Ajax call. On the browser, the modal dialog displays a simple message that the session is terminated due to exceeding the idle time limit. This all works fine (see screenshot).

EDIT: Updated with “appendToBody” fix

Here is the code from my Facelet page:

    <p:idleMonitor timeout="#{initParam[clientSideIdleThreshold]}">
        <p:ajax
            event="idle"
            listener="#{logoutBean.idleListener}"
            oncomplete="idleDialog.show()" />
        <p:ajax
            event="active"
            listener="#{logoutBean.activeListener}" />
    </p:idleMonitor>
    <p:dialog
            header="Session Exceeded Idle Limit"
            widgetVar="idleDialog"
            modal="true"
            fixedCenter="true"
            closable="false"
            draggable="false"
            resizable="false"
            appendToBody="true"
            height="200"
            width="400">
        <h:outputText value="Session Terminated" />
    </p:dialog>

What I want to do is override the default opacity of the PrimeFaces dialog overlay and make it more opaque. Does anyone know how to do this?

I’m hoping that this can be accomplished by putting some CSS in the right place because I would really like to avoid writing any JavaScript to accomplish this.

The target browsers for the user environment are IE 6 and 7.

Answer 1

Fortega’s answer was correct for some browsers, but for IE 7 you need to use the following CSS:

.ui-widget-overlay {
    filter:alpha(opacity=80);  /* works in IE 7 */
    opacity: 0.8;  /* works in Firefox */
}

According to http://www.w3schools.com the opacity CSS attribute is non-standard but is proposed for inclusion in CSS3.