如何放弃 PrimeFaces Dialog 的透明度？答案

【问题标题】：How to abandon the transparency of a PrimeFaces Dialog?如何放弃 PrimeFaces Dialog 的透明度？
【发布时间】：2012-10-06 05:51:50
【问题描述】：

我正在尝试在我的 JSF 页面中使用 Primefaces 对话框 组件显示警报。我可以显示对话框，但我的问题在于该对话框的透明度/不透明度。我通过设置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

【问题讨论】：

标签： jsf mobile jsf-2 dialog primefaces

【解决方案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 库的一般样式表可能会帮助我更多地自定义对话框。

我的动态网络项目中样式表的路径：WebContent/assets/css/style.css 这可以作为遇到类似问题的人的参考。

【讨论】：

您可以覆盖primefaces的样式表。看看这个答案。 how-to-override-stylesheets-of-primefaces

【解决方案2】：

提供自定义主题时，您应该创建一个主题文件。 PrimeFaces 的默认主题是 Aristo。有关如何创建自定义主题的更多信息，请参阅 PrimeFaces Guide 或 mobile PrimeFaces Guide。

如果您不想创建完整的主题，则应用默认主题。要覆盖应用主题中的样式，您需要使用!important。（不过你已经发现了。）

我使用的一个有用的工具是 FireBug。 FireBug 显示哪些 CSS 规则应用于元素以及哪些规则被覆盖。

【讨论】：

样式表中的!important 不是强制性的。这取决于您如何加载样式表。如果您的出现在 PrimeFaces 之前，那么它将被覆盖。 !important 可以防止这种情况。但这是一个丑陋的解决方法。最好将您的 <h:outputStylesheet> 重新排列为 <h:body>，以便它在 PrimeFaces 之后加载。顺便说一下，OP 的具体问题略有不同。
@BalusC IIRC PrimeFaces CSS 总是在 JSF 页面之前加载。因此，无法重新排列样式表。
@siebz0r，可以根据需要重新排列样式表。另见how-to-override-stylesheets-of-primefaces

【解决方案3】：

对于所有遇到此问题的人，我只是找到了一个解决方案：

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

将primefaces继承类添加到对话框中，默认会出现。

【讨论】：