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组件共享很多类，但是一个对话框总是有类ui-dialog，所以如果你只定位对话框的直接头子元素，它应该工作：

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

FIDDLE

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");