jquery - Jquery 对话框 - 标题栏颜色变化

Question

我试图单独更改为标题栏颜色。所以我使用了 .ui-dialog-titlebar ，但它不起作用，所以我尝试使用 ui-widght-header，它也反映到数据表中。请告知。

// 不工作

.ui-dialog-titlebar {
  background-color: #F9A7AE;
  background-image: none;
  color: #000;
}

//工作，但也反映到数据表头..

.ui-widget-header
{
    background-color: #99CCFF;
    background-image: none;
    color: Black;
}

我正在寻找只有颜色的对话框标题栏..请告知。

Answer 1

jQuery UI 组件共享很多类，但对话框总是有 class ui-dialog，所以如果你只针对对话框的直接标题子项，它应该可以工作：

.ui-dialog > .ui-widget-header {background: red;}

小提琴

Answer 2

仅供参考：如果你想切换模式标题的颜色，你可能想做这样的事情：

if(Success)
  $(".ui-dialog").find(".ui-widget-header").css("background", "darkgreen");
else
  $(".ui-dialog").find(".ui-widget-header").css("background", "red");

Answer 3

如果你希望它是特定的每个 id

$("#dialogId1).closest(".ui-dialog").children(".ui-dialog-titlebar").css("background", "lightblue");

$("#dialogId2).closest(".ui-dialog").children(".ui-dialog-titlebar").css("background", "yellow");

Answer 4

另一个简单的方法：只需使用下面的类来更改您的 CSS 文件上的标题栏颜色

.ui-dialog .ui-dialog-titlebar {
    background-color: blue;
}