无法更改 jQuery UI 对话框标题栏的 css 属性答案

【问题标题】：Can't change the css properties of jQuery UI dialog titlebar无法更改 jQuery UI 对话框标题栏的 css 属性
【发布时间】：2014-11-18 22:06:06
【问题描述】：

我无法更改 jQuery UI 对话框标题栏的背景颜色。我是这样编码的：

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

顺便说一句，我的应用程序只能在 IE 中打开。我尝试使用 IE 开发人员工具检测标题栏和页脚 css 属性，但它不会检测到标题栏和页脚。但它识别 ui-dialog-content 的 css 属性。请给我建议。

【问题讨论】：

你的意思是你的 UI 对话框中没有标题？
title 存在.. 但不允许我更改样式？

标签： jquery html css jquery-ui

【解决方案1】：

标题栏是 div 对话框的兄弟，所以试试：

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

【讨论】：

【解决方案2】：

似乎删除类比所有这些都好。

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

和你的新 '.custom-dialog' 类一样的风格

【讨论】：