jQuery对话框主题和样式

如何更改jQuery对话框标题栏的背景颜色？

我看过themeroller，但它似乎对我不起作用。

谢谢

Answer 1

我这样做（为标题添加“ui-state-error”样式）：

Answer 2

您可以通过修改ui-dialog-titlebar CSS类来更改它，但我强烈建议您使用ThemeRoller工具 。

也可以看看：

• UI /对话框/主题化
• UI /主题化/ API

Answer 3

对话框中的每个元素都有关联的类。

使用Firebug检查元素并使用CSS来设置它们的样式。 例如，标题栏的类为“ui-dialog-titlebar”。

（这假设您使用的是jQuery UI对话框）

Answer 4

使用dialogClass属性。 您可以在jquery对话框中应用任何css。 下面我们将格式化标题和内容块。

      
Hello StackOverflow!
  

Answer 5

前面的示例运行良好，但只有错误主题的红色。

这是一个简单的解决方案，只需更改css中的标题图像：

CSS：

 .ui-widget-header-custom{ background: #f6a828 url(../images/ui-bg_flat_95_0a43ac_40x100.png) 50% 50% repeat-x; } 

JavaScript的：

 $('#my_dialog').dialog({ open: function(event, ui){ $(this).parents(".ui-dialog:first").find(".ui-widget-header") .removeClass("ui-widget-header").addClass("ui-widget-header-custom"); } }); 

请注意，与前面的示例相反，我删除了：

 removeClass("ui-widget-header") 

而不只是在以下方面添加类：

 find(".ui-dialog-titlebar") 

必须注意，此示例适用于没有链接的对话框标题。

Answer 6

有时您无法编辑css文件。 所以你可以尝试这个：

 dialog = $('
').dialog({ title: 'Dialog with css for title bar', open: function() { $(this).parents(".ui-dialog:first").find('.ui-dialog-titlebar').css('background-color','#275D9E'); } });