PrimeFaces 3.0 - How do I override the default opacity of a dialog overlay?


Tags: java,css,dialog,jsf-2,primefaces

Problem :

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

enter image description here

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.



Solution :

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 www.w3schools.com the opacity CSS attribute is non-standard but is proposed for inclusion in CSS3.


    CSS Howto..

    How do I make a (mock) bank system? [closed]

    How to override the computed style in css?

    How to deselect a table's head and certain tds with css

    how to set individual scroll for content and left menu

    What html or css attribute should I modify so that a mobile browser shows the website with no blank space on the right?

    How to change CSS attribute value based on querystring using jQuery

    How to keep floating labels floating after input. Pure CSS

    How to use 100% CSS background-image with scrolling content?

    Having Two HTML issues with PHP DOM: 1.) DOMDocument::createEntityReference $name values and 2.) how to add multiple CSS classes an element?

    How to use font-face with cssless?

    How do I set the offset of a div from the top of an outer div to be the same as the offset from the side of the outer div using only css?

    CSS: How to build a vertical separator with margin on its top and bottom? [closed]

    How to avoid this hardcoded index.js when use webpack?

    CSS, how to put a div inside a div that is responsive?

    How to turn off spell checking in CSS?

    How to include 3 background images in a single css?

    How to move a circle down by 15px with CSS HTML

    How to morph a plus sign to a minus sign using css transition?

    simple css issue - how to change anchor inside li if li:hover

    how to scroll text area horizontally?

    How do you change the font-size of a custom css style?

    How do I get text to overlay on top of an image in Dreamweaver?

    How to center text horizontally and vertically within box element? [duplicate]

    How can I vertically align two floated divs?

    How to have 2+ boxes slide down

    How to include Material Design libraries without npm

    How to create a custom vaadin component in vaadin 6

    How to bring parent div front?

    meteor: how to use multiple classes in css selector

    How to add another two full width sections below (CSS)