PrimeFaces 3.0 - 如何覆盖对话框叠加层的默认不透明度？

Question

我正在使用 PrimeFaces 3.0 和 JSF 2.0。在我的 web 应用程序中，当用户的浏览器空闲一段时间后，我会在页面上显示一个模式对话框，这会通过 Ajax 调用在服务器端触发会话失效。在浏览器上，模式对话框会显示一条简单的消息，表明会话由于超出空闲时间限制而终止。这一切都很好（见截图）。

编辑：已更新“appendToBody”修复

以下是我的 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>

我想要做的是覆盖 PrimeFaces 对话框叠加层的默认不透明度并使其更加不透明。有谁知道如何做到这一点？

我希望这可以通过将一些 CSS 放在正确的位置来完成，因为我真的想避免编写任何 JavaScript 来完成此任务。

用户环境的目标浏览器是 IE 6 和 7。

Answer 1

在你的CSS中：

.ui-widget-overlay {
    opacity: 0.8;
}

或其他值:)

但是你需要确保你显示的对话框是模态的()，否则不会显示覆盖。

Answer 2

Fortega 的答案对于某些浏览器是正确的，但对于 IE 7，您需要使用以下 CSS：

.ui-widget-overlay {
    filter:alpha(opacity=80);  /* works in IE 7 */
    opacity: 0.8;  /* works in Firefox */
}

根据 www .w3schools.com 不透明度 CSS 属性不是标准的，但建议包含在 CSS3 中。