Невозможно изменить свойства css диалогового окна диалога jQuery UI.

Question

Я не могу изменить цвет фона в строке заголовка диалогового окна jQuery. Я кодирую так:

jQuery("#divId").dialog({ 
      title: 'Information' 
}); 
jQuery("#divId .ui-dialog-titlebar").css("background-color", "red"); 

Кстати, мое приложение откроется только в IE. Я попытался определить свойства CSS-заголовка и нижнего колонтитула с помощью инструментов разработчика IE, но он не обнаружит заголовка и нижнего колонтитула. Но он распознает свойства css ui-dialog-content. Пожалуйста, предложите мне.

Answer 1

Titlebar является родственным диалогом сНа так попробовать:

jQuery("#dialog").prev('.ui-dialog-titlebar').css("background", "red"); 

Просто указав цвет фона не достаточно вместо того, чтобы вам необходимо изменить фон, который ставится на месте по следующему правилу по названию div, который помещает фоновое изображение.

.ui-widget-header { 
    border: 1px solid #aaaaaa/*{borderColorHeader}*/; 
    background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; 
    color: #222222/*{fcHeader}*/; 
    font-weight: bold; 
} 

Но будет гораздо лучше использовать стиль css. Задайте dialogClass для этого конкретного диалогового окна, которое вы хотите настроить.

jQuery("#dialog").dialog({ 
    title: 'Information', 
    dialogClass: 'info' 
}); 

и укажите правило для этого и убедитесь, что ваша таблица стилей загружена после jquery ui.

.info .ui-widget-header { 
    background:red; 
} 

Fiddle

Answer 2

Похоже, удаление класса лучше, чем все это.

$("#dialog").dialog({ 
    dialogClass: 'custom-dialog', 
    create: function() { 
     $('.ui-dialog-titlebar').removeClass('ui-widget-header'); 
    } 
}); 

и стиль, как вы бы с вашим новым «.custom-диалог» классом