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

-3

我的页面有2个jQuery dialogs。当生成的页面都<div>元素具有相同class定义：如何设置jQuery对话框的标题栏的背景颜色？

<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>

我需要第二个对话框的标题的背景设置为红色。该对话框将显示第二个<div>的span元素中指定的“错误”消息。

我还添加了逻辑在我.js文件上的失败条件：

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

但我还是有以下弹出：

我会怎么做呢？

来源

2016-08-24 gene

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

.error { 
    background: red; 
}

您可以从red改变颜色使用十六进制代码一个更好的色彩。例：

.error { 
    background: #EC485B; 
}

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

来源

2016-08-24 20:20:02 Sean

我可以只添加'风格=“背景：红色“到第二个对话框？ – gene

刚才做的和对话框背景本身变成了红色 – gene

@gene你可以这样做，但这不是最佳做法。你应该把你的CSS写在一个单独的文件中。忽略那些说jQuery做的人。从长远来看，使用JavaScript进行风格将会非常昂贵，而且这是一个坏习惯。它会让你的网站变慢。 – Sean

我建议的CSS解决方案，这一点 -

您可以添加样式UI的对话框的标题 - selectMsg

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

或者你可以使用CSS伪类

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

我假定你w anted给背景颜色跨度。

如果你想给的背景颜色为标题栏格，使用下面的CSS：

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

来源

2016-08-24 20:28:10 Arun

，如果你想用jQuery使用下面的语法来做到这一点，

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

，或者你wnat用户内联，然后添加

<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。因为它不是推荐

来源

2016-08-24 20:28:30

我试图将语法插入到我的.js文件中，但对话框仍然没有“红色”标题。看看我在我的问题描述中添加的图片 – gene

$（'＃ui-dialog-title-selectMsg'）。parent（'。ui-dialog-titlebar'）.css（'background'，'none'）。使用这个，然后$（'＃ui-dialog-title-selectMsg'）。parent（'。ui-dialog-titlebar'）.css（'background-color'，'red'）@gene –

当设置背景为无，我开始得到一个JavaScript错误，说我的功能，我定义所有的代码没有定义 – gene

添加

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

到您的样式表。如果要使用不同的颜色，你可以使用http://www.colorpicker.com/和复制颜色的十六进制代码，只需添加为如下（注意包括hashtag）：

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

来源

2016-08-24 20:29:18

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

回答

相关问题