Диалоговое окно Jquery - изменение цвета заголовка

Я пытаюсь изменить только цвет заголовка. Поэтому я использовал .ui-dialog-titlebar, но он не работает, поэтому я попытался использовать ui-widght-header, который также отражает таблицу данных. Пожалуйста, сообщите.

// Не работает

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

//Работает, но также отражается в заголовке datatable..

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

Я ищу цвет только в заголовке диалогового окна. Пожалуйста, сообщите.


jquery jquery-dialog
person user2444474    schedule 18.07.2013    source источник

Ответы (4)


arrow_upward
23
arrow_downward

Компоненты пользовательского интерфейса jQuery имеют много общих классов, но диалоговое окно всегда имеет класс ui-dialog, поэтому, если вы нацелитесь только на прямой дочерний заголовок диалогового окна, оно должно работать:

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

FIDDLE

person adeneo    schedule 18.07.2013

arrow_upward
1
arrow_downward

К вашему сведению: если вы хотите переключить цвет модального заголовка, вы можете сделать что-то вроде этого:

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

arrow_upward
1
arrow_downward

Если вы хотите, чтобы он был конкретным для каждого идентификатора

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

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

person Chan    schedule 04.03.2019

arrow_upward
0
arrow_downward

Еще один простой метод: просто используйте приведенный ниже класс, чтобы изменить цвет строки заголовка в вашем файле CSS.

.ui-dialog .ui-dialog-titlebar {
    background-color: blue;
}
person Naren Hemnani    schedule 03.06.2020