PrimeFaces 3.0 - How do I override the default opacity of a dialog overlay?
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">
&开发者_如何学JAVAlt;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.
in your css:
.ui-widget-overlay {
opacity: 0.8;
}
or some other value :)
But you need to be sure the dialog you are showing is modal(<p:dialog modal="true"
), otherwise no overlay will be shown.
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.
精彩评论