Question

我正在使用primefaces 3.5，我希望在完成任何操作后显示对话框窗口。对话框应该显示如下

enter image description here

但我不知道为什么我的主题不起作用我尝试了很多，我有这样的输出 enter image description here

我过度骑行的CSS就是这个

.ui-widget-content{
    background-color:white;

}
.ui-helper-clearfix:after{
    background-color:green!important;

}
.ui-widget-header{
    background:green!important;

}
.ui-shadow{

    box-shadow:none;
}
.ui-dialog-content{
    background:white!important;

    padding: 0,0,0,0!important;
}

我的xhtml文件代码是这个

<h:form id="form6"> 
                            <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true"  /> 


        <h:button id="button1" onclick="ex.show();return false;" value="Ex alternis sermonibus" actionListener="#{indexBean.addInfo}"/>


        <h:button id="button2"  onclick="radicalis.show();return false;" value="Radicalis alternis sermonibus"/>

    <p:commandButton id="infoButton" value="Info" actionListener="#{indexBean.addInfo}"/>         

</h:form> 
        <h:form id="form1">
            <h:outputText id="hail"/>
        </h:form>

        <h:outputText id="hail-outside" />

        <p:dialog id="dialog1" header="Success" modal="true" resizable="false" style="height: 121px!important;left: 18px!important;width: 295px!important;"   appendToBody="true"  widgetVar="ex"
         styleClass="ui-widget-content ui-helper-clearfix:after ui-widget-header ui-shadow .ui-dialog .ui-dialog-content">
            <h:form id="form2">
                <h:outputText value="You have successfully complete the action" ></h:outputText>
                <p:commandButton value="ok" >

                </p:commandButton>
            </h:form>
        </p:dialog>

        <p:dialog id="dialog2"  appendToBody="true" modal="true" widgetVar="radicalis">
            <h:form id="form3">
              <h:outputText value="Welcome here every one"></h:outputText>
            </h:form>
        </p:dialog>

请告诉我我的css有什么问题

Answer 1

你做的事情还不错：

设置对话框的大小，不要使用样式。使用'width'和'height'属性。
您不必在对话框中添加类。你应该只添加一个单独的类（你自己的一个类，而不是jquery类），然后使用这个类和所有jquery类来引用这个对话框。

的差异：

宽度：如上所述，使用p：dialog。的宽度属性。
绿色边框：有几种方法可以实现这一点 1）将边框添加到.ui-dialog-content.ui-widget-content
2）将绿色背景添加到.ui-dialog.ui-widget.ui-widget-content，然后将白色背景和边距添加到.ui-dialog-content.ui-widget-content
标题中的阴影：将其从.ui-dialog-titlebar.ui-widget-header中删除。

这是对话框的样子：

<p:dialog id="dialog1" header="Success" modal="true" resizable="false" appendToBody="true"  widgetVar="ex" width="295" height="181"
     styleClass="customDialog">

css中的样式:(这不是让它工作的所有css，只是你应该如何处理类的样本）

.customDialog {
    background: green;
}

.ui-dialog.customDialog .ui-dialog-content {
    padding: 0;
    margin: 20px 10px;
}
.ui-dialog-titlebar.ui-widget-header.customDialog {
    background: green;
    color: black;
    box-shadow: none;
}

这样您只能编辑此特定对话框的CSS。

Answer 2

在我的情况下，css不同，因为我想更改边框的颜色

<p:dialog id="dialog1" header="Success" modal="true" resizable="false" appendToBody="true"  widgetVar="ex" width="295" height="181"
 styleClass="customDialog">

CSS

.customDialog {
    color : white;
}

.customDialog .ui-dialog-titlebar.ui-widget-header {
    background: green !important;
}

如何在Dialog窗口中覆盖primefaces中的主题并设置用户定义CSS

2 个答案: