PrimeFaces 3.0 - Wie kann ich den Standardwert überschreiben, Deckkraft einer dialog-overlay?

Ich bin mit PrimeFaces 3.0 und JSF 2.0. In meiner webapp, ich Anzeige eines modalen Dialoges über die Seite, wenn der browser des Benutzers im Leerlauf für eine bestimmte Länge der Zeit, und dies löst eine Sitzung der Nichtigkeit auf der server-Seite per Ajax-call. Auf den browser, den modal-dialog zeigt eine einfache Meldung, dass die Sitzung beendet wird wegen überschreiten der Leerlauf-Zeitlimit. Dies alles funktioniert einwandfrei (siehe screenshot).

EDIT: Aktualisiert mit "appendToBody" fix

PrimeFaces 3.0 - Wie kann ich den Standardwert überschreiben, Deckkraft einer dialog-overlay?

Hier ist der code von meinem Passenden Seite:

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

, Was ich will zu tun ist, setzen die Standardeinstellung der Deckkraft der PrimeFaces-dialog-overlay und machen es undurchsichtiger. Weiß jemand, wie dies zu tun?

Ich hoffe, dass dies erreicht werden kann, indem einige CSS an der richtigen Stelle, da würde ich wirklich wie zu vermeiden, das schreiben von JavaScript, um dies zu erreichen.

Den Ziel-Browser für die Benutzer-Umgebung sind IE 6 und 7.

Wo ist dein Standort? Es ist wahrscheinlich eine CSS-Eigenschaft, aber wir können nicht sagen, bis wir sehen, wie es gebaut wird 🙂
Sind Sie sicher, dass dieser dialog ist modal (modal='true')? Es sieht aus wie es ist kein überlagertes Symbol.
Die Website ist auf einem privaten Netzwerk leider. Die CSS benutzt, verpackt mit PrimeFaces 3.0-distribution, die stützt sich stark auf jQuery UI Themeroller-Stile.
Das overlay ist hellblau, das oben auf einem weißen hintergrund. Es ist sehr transparent, das ist, warum ich wollen, erhöhen Sie die Deckkraft.
Verwenden Sie p:layout? Sie können replizieren das Verhalten bei modalen dialog in online-Schaufenster von PrimeFaces? Können Sie versuchen appendToBody="true" auf dialog.

InformationsquelleAutor Jim Tough | 2011-06-28

  1. 6

    in der css:

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

    oder einen anderen Wert 🙂

    Aber Sie müssen sicher sein, den dialog, die Sie zeigen, ist modal(<p:dialog modal="true"), sonst keine-overlay wird angezeigt.

    Das funktioniert in Firefox aber nicht in IE 7 (was ist der Ziel-browser für die Benutzer-Umgebung). Ich werde spielen, um mit etwas mehr und sehen, ob ich finden kann, das problem. Ich bin mit modal="true" aber es hält die Anzeige der modal-box unter dem overlay. Damit kann ich Leben, mit dieser für eine einfache Meldung wie meine idle-Nachricht, aber offensichtlich Sie nicht verwenden können, ein Formular-dialog, der bedeckt ist durch ein overlay. Ich dachte, das könnte ein defekt in der PrimeFaces 3.0 Schnappschuss, aber vielleicht mache ich etwas anderes falsch.

    InformationsquelleAutor Fortega

  2. 3

    Fortega die Antwort richtig war, für einige Browser, aber IE 7 verwenden müssen Sie die folgenden CSS:

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

    Laut http://www.w3schools.com die Deckkraft CSS-Attribut ist nicht standard, sondern wird vorgeschlagen für die Aufnahme in CSS3.

    InformationsquelleAutor Jim Tough

Schreibe einen Kommentar