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

发布于 2024-11-17 18:46:33 字数 1305 浏览 3 评论 0 原文

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

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

淡写薰衣草的香 2024-11-24 18:46:33

在你的CSS中:

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

或其他值:)

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

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.

情丝乱 2024-11-24 18:46:33

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 中。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文