5

JSFページのPrimefacesDialogコンポーネントを使用してアラートを表示しようとしています。ダイアログを表示することはできますが、私の問題はこのダイアログの透明度/不透明度にあります。を設定してダイアログのstyleプロパティを上書きしましたopacity: 1.0が、機能しませんでした。ダイアログの透明性を放棄したい。どうすれば簡単にこれを達成できますか？

私の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を使用しています

4

3 に答える 3

5

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 これは、同様の問題に直面している人の参照になる可能性があります。

于 2012-10-19T07:47:50.790 に答える
1

カスタマイズされたテーマを提供する場合、テーマファイルを作成することになっています。PrimeFacesのデフォルトのテーマはAristoです。カスタムテーマを作成する方法の詳細については、PrimeFacesガイドまたはモバイルPrimeFacesガイドを参照してください。

ただし、完全なテーマを作成したくない場合は、デフォルトのテーマが適用されます。適用されたテーマのスタイルを上書きするには、を使用する必要があります!important。（あなたはすでにこれを発見しました。）

私が使用する便利なツールはFireBugです。FireBugは、どのCSSルールが要素に適用され、どのルールがオーバーライドされるかを示します。

于 2012-10-19T12:52:50.693 に答える
-1

この問題を抱えているすべての人に、私はこれで解決策を見つけます：

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

Primefaces継承クラスをダイアログに追加すると、デフォルトで表示されます。

于 2014-12-02T21:38:46.370 に答える