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]}">
            oncomplete="" />
            listener="#{logoutBean.activeListener}" />
            header="Session Exceeded Idle Limit"
        <h:outputText value="Session Terminated" />

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

    CSS Howto..

    How to fix an overlapping image in CSS?

    How to add spacing between two span elements

    Why is Nexus 4 (using Chrome for Android) showing window size as 384x519 but screenshot shows 768x1038?

    How to use jQuery without making a mess? [closed]

    How to apply SVG clipPath to HTML element that is not in the top left corner of document in webkit browsers

    How do I center numbers in a table from Google Visualization API?

    How do I get one element to respond to the click of another element? - CSS/jQuery

    How to create rounded edge panel in ExtJS 2.1

    How to center two columns using CSS?

    Android How to load Custom CSS on external HTML page in WebView

    css: how to make the third div line up with the first div

    CSS how can I add border also to triangle? [duplicate]

    How to disable [marquee] tag with CSS? Is this possible?

    How can I make dynamic progress bar using just jquery?

    how to center horizontally div and span elements using css

    html/CSS how to make a div always center when the window is resized [duplicate]

    Can someone help explain how the css3 calc() method actually works?

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

    How can we retrive style from css by selector without creating element?

    how do I select in css so the items appears in hover state In entire page(mega menu)

    While scrolling, The current div goes up, and another div under it (under the first div background) shows

    How to detect whether a browser has tap highlighting?

    How to put Facebook and Twitter buttons next to each other?

    How can I know if I am clicking on a transparent or non-transparent part of a png on a web page?

    In CSS, how to hover a background over an image

    How to vertically align both image and text in a DIV using CSS?

    CSS How to get the same height?

    How do you make 2 different views for logged in/not logged in like facebook's newsfeed/login pages?

    How to make alerts overlap?

    Jquery how to set active link css color