如何放棄PrimeFaces對話框的透明性？

Question

我試圖在我的JSF頁面中使用Primefaces對話框組件顯示警報。 我可以顯示對話框，但是我的問題是此對話框的透明度/不透明度。 我通過設置opacity: 1.0覆蓋了對話框的style屬性，但是它沒有用。 我想放棄對話框的透明度。 如何以簡單的方式實現這一目標？

我的JSF頁面：

<f:view xmlns="http://www.w3.org/1999/xhtml"
....
renderKitId="PRIMEFACES_MOBILE">
....
<pm:page title="Mobile Reports">
<pm:view id="reports" swatch="b">
<h:form>
<pm:content>
<div>
<h:form>
    ....
    <p:dialog id="myDialog"
        header="ERROR"
        widgetVar="dlg"
        modal="true"
        style="opacity: 1.0;"
        appendToBody="true">
        <p:commandButton id="decline" value="Couldn't display the report!"
            onclick="dlg.hide()" type="button" />
    </p:dialog>
    ....
    <p:commandButton id="contractInfo" action="ContractInfo.xhtml"
        value="Contract Information" style="width:100%;"
        onerror="dlg.show();">
    </p:commandButton>
    ....
</h:form>
</div>
</pm:content>
</h:form>
</pm:view>
</pm:page>
</f:view>

輸出：

GPRS顯示在JSF頁面中，它不是對話框的一部分。 但是，由於對話框是透明的，因此它是可見的。

注意：我使用的是primefaces-mobile-0.9.3.jar

Answer 1

我已經嘗試過像這樣在JSF頁面中覆蓋對話框組件的CSS樣式（請注意！important表達式）：

<p:dialog id="myDialog" header="ERROR" widgetVar="dlg" modal="true"
        style="background: gray !important;" appendToBody="true">
        <p:commandButton id="decline" value="Couldn't display the report!"
            onclick="dlg.hide()" type="button" />
</p:dialog>

現在，對話框以某種方式變得更好，看起來像：

但是，在我的項目中覆蓋PrimeFaces庫的常規樣式表可能會幫助我更多地自定義對話框。

我的動態Web項目中樣式表的路徑： WebContent / assets / css / style.css可能遇到類似問題的人可以參考。

Answer 2

提供自定義主題時，應該創建一個主題文件。 PrimeFaces的默認主題是Aristo。 有關如何創建自定義主題的更多信息，請參見《 PrimeFaces指南》或移動《 PrimeFaces指南》 。

但是，如果您不想創建完整的主題，則會應用默認主題。 要覆蓋應用主題中的樣式，您需要使用!important 。 （盡管您已經發現了這一點。）

我使用的一個有用的工具是FireBug。 FireBug顯示將哪些CSS規則應用於元素，以及哪些規則將被覆蓋。

Answer 3

對於遇到此問題的每個人，我都可以找到一個解決方案：

<p:dialog header="Header" widgetVar="dlg1" showEffect="pop"
            styleClass="ui-page-theme-a ui-bar-inherit">

將primefaces繼承類添加到對話框，默認情況下它將出現。