Question

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

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

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

Answer 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

Answer 2

似乎删除课程比所有课程更好。

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

和你用新的#custom-dialog＆＃39;一样的风格。类

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

2 个答案: