java PrimeFaces 3.0 - 如何覆盖对话框覆盖的默认不透明度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6507350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PrimeFaces 3.0 - How do I override the default opacity of a dialog overlay?
提问by Jim Tough
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).
我正在使用 PrimeFaces 3.0 和 JSF 2.0。在我的 web 应用程序中，当用户的浏览器空闲一段时间后，我会在页面上显示一个模式对话框，这会通过 Ajax 调用在服务器端触发会话失效。在浏览器上，模态对话框会显示一条简单的消息，表明会话因超出空闲时间限制而终止。这一切正常（见截图）。
EDIT: Updated with "appendToBody" fix
编辑：更新为“appendToBody”修复
Here is the code from my Facelet page:
这是我的 Facelet 页面中的代码：
<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?
我想要做的是覆盖 PrimeFaces 对话框覆盖的默认不透明度并使其更加不透明。有谁知道如何做到这一点？
I'm hoping that this can be accomplished by putting some CSS in the right place because I would reallylike to avoid writing any JavaScript to accomplish this.
我希望这可以通过将一些 CSS 放在正确的位置来实现，因为我真的很想避免编写任何 JavaScript 来实现这一点。
The target browsers for the user environment are IE 6 and 7.
用户环境的目标浏览器是 IE 6 和 7。
回答by Fortega
in your css:
在你的 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.
但是您需要确保您显示的对话框是modal( <p:dialog modal="true")，否则将不会显示叠加层。
回答by Jim Tough
Fortega's answer was correct for some browsers, but for IE 7 you need to use the following CSS:
Fortega 的回答对于某些浏览器是正确的，但对于 IE 7，您需要使用以下 CSS：
.ui-widget-overlay {
filter:alpha(opacity=80); /* works in IE 7 */
opacity: 0.8; /* works in Firefox */
}
According to www.w3schools.comthe opacity CSS attribute is non-standard but is proposed for inclusion in CSS3.
根据www.w3schools.com，不透明度 CSS 属性是非标准的，但建议包含在 CSS3 中。
