PrimeFaces 3.0 - 如何覆盖对话框覆盖的默认不透明度？答案

【问题标题】：PrimeFaces 3.0 - How do I override the default opacity of a dialog overlay?PrimeFaces 3.0 - 如何覆盖对话框覆盖的默认不透明度？
【发布时间】：2011-09-24 08:11:33
【问题描述】：

我正在使用 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。

【问题讨论】：

您的网站在哪里？它很可能是一个 CSS 属性，但在我们看到它是如何构建的之前我们不能告诉你:)
你确定这个对话框是模态的（modal='true'）？看起来根本没有覆盖。
不幸的是，该站点位于专用网络上。使用的 CSS 打包在 PrimeFaces 3.0 发行版中，该发行版严重依赖 jQuery UI Themeroller 样式。
覆盖在白色背景上呈淡蓝色。它非常透明，这就是我想增加不透明度的原因。
你在使用 p:layout 吗？您可以在 PrimeFaces 的在线展示中复制模态对话框中的行为吗？你能在对话框上试试 appendToBody="true" 吗？

标签： java css dialog jsf-2 primefaces

【解决方案1】：

在你的 CSS 中：

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

或其他一些值:)

但您需要确保您显示的对话框是模态的（<p:dialog modal="true"），否则不会显示叠加层。

【讨论】：

这适用于 Firefox，但不适用于 IE 7（这是用户环境的目标浏览器）。我会再玩一些，看看我能不能找到问题。我正在使用modal="true"，但它一直在叠加层下显示模态框。我可以接受这个简单的通知，比如我的空闲消息，但显然你不能使用覆盖层覆盖的表单对话框。我认为这可能是 PrimeFaces 3.0 快照中的一个缺陷，但也许我做错了什么。

【解决方案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，opacity CSS 属性是非标准的，但建议包含在 CSS3 中。

【讨论】：