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 to make
  • add css class active after refreshing page?
  • how to create 3 columns in HTML+CSS and group 2 div elements in the third column

    How do I achieve a fully working image scrolling effect like in this example?

    How to set a fixed width column with CSS flexbox

    How to align items in second (and further) column, so that the changing value (increasing characters) do not push

    how to make this div margin to zero and more nature [closed]

    How can I get IE8 to accept a css :before tag?

    CSS Specificity - How does “it” decide which styles to apply?

    How to keep div same height at all times

    How to get a hidden content to show over cursor using html, css, javascript?

    How to group CSS colors

    How to reload CSS when using Less.js

    How to target CSS for iPad but exclude Safari 4 desktop using a media query?

    How to change CSS to the same class but another input name

    How to apply CSS to document.write()?

    how can I center button below my text while using bootstrap css?

    Rails 4: how to apply custom CSS to Rails form file field

    how do i suppose to make the 4 box be responsive?

    How to make bootstrap btn-group break into half naturally

    What is default z-Index of
    element in HTML, and how to get it using JavaScript?

    How to change the button color when it is active using bootstrap?

    How to hide div for specific height or width using CSS [duplicate]

    How to apply styles to neighboring elements in a list

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

    How to style a div to be a responsive square? [duplicate]

    how to set primefaces datatable columns padding with CSS padding

    How do I align these boxes using bootstrap?

    How to Center-Justify links in CSS?

    How to add a second slideshow on the same webpage

    How to add multiple font files for the same font?