如何设置jQuery对话框的标题栏的背景颜色？

Question

我的网页有2个jQuery dialogs。生成页面时，<div>个元素都具有相同的class定义：

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span class="ui-dialog-title" id="ui-dialog-title-dvMonitor">Monitor Status</span>
</div>

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span class="ui-dialog-title" id="ui-dialog-title-selectMsg">Error</span>
</div>

我需要将第二个对话框的标题背景设置为红色。此对话框将显示＆＃34;错误＆＃34;第二个span的{​​{1}}元素中指定的消息。

我还在<div>文件中添加了一个失败条件的逻辑：

.js

但我仍然有以下弹出窗口：

我该怎么做？

Answer 1

在第二个对话框的 div 上添加error课程。然后在样式表中写下以下内容。

.error { 
  background: red;
}

您可以使用十六进制代码将颜色从red更改为更好的颜色。 示例：

.error {
  background: #EC485B;
}

这会给你更多的砖红色。使用十六进制颜色代码来找到适合您应用的红色乘坐颜色。

Answer 2

我建议使用CSS解决方案 -

1. 您可以将样式添加到ui-dialog-title-selectMsg

   #ui-dialog-title-selectMsg {
      background: red;
   }
   

2. 或者您可以使用css伪类

   .ui-dialog-titlebar:nth-child(2) > .ui-dialog-title {
       background: red;
   }
   

我以为你想给跨度的背景颜色。

如果要为标题栏div提供背景颜色，请使用以下CSS：

.ui-dialog-titlebar:nth-child(2){
        background: red;
}

Answer 3

如果你想用jquery做这个，请使用下面的语法，

$('#ui-dialog-title-selectMsg').parent('.ui-dialog-titlebar').css('background-color','red')

或者如果您想要内联用户，请添加

 <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" style="background:red">
        <span class="ui-dialog-title" id="ui-dialog-title-selectMsg">Error</span>
</div>

或者你为第二个对话框添加一个类'err-bg'，然后给它设置样式。

.err-bg{
background: red;
}

尽可能避免使用内联css。因为不推荐

Answer 4

添加

#ui-dialog-title-selectMsg {
  color: red;
}

进入样式表。 如果你想使用不同的颜色，你可以使用http://www.colorpicker.com/并复制颜色的十六进制代码，只需添加如下（注意主题标签）：

#ui-dialog-title-selectMsg {
  color: #E0412F;
}