Question

我想在jQueryUI Dialog标题中更改TitleBar的样式，例如我想要绿色背景 - 它应该只应用于ID指定的一个对话框。这就是我写这样的东西的原因：

#sendInviteRequestDialog .ui-dialog .ui-widget-header{
    background-color: green !important;
}

但不幸的是它没有用。我试过这样的事情：

#sendInviteRequestDialog > .ui-dialog > .ui-widget-header{
    background-color: green !important;
}

但它也没有解决我的问题。我究竟做错了什么？提前谢谢。

Answer 1

对话框标记（叠加阴影，边框，背景，标题栏，关闭按钮，拖动控制柄等）将添加到您调用 .dialog() 的div之外。因此#sendInviteRequestDialog .ui-dialog .ui-widget-header无法按预期工作。

要设置特定对话框的样式，请使用dialogClass选项：

指定的类名将添加到对话框中额外的主题。

示例代码：

$("#sendInviteRequestDialog").dialog({
    modal: true,
    dialogClass: "custom-dialog-1"
});

生成的标记：

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all custom-dialog-1 ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-id-1" style="outline: 0px; z-index: 1002; position: absolute; height: auto; width: 300px; top: 29.5px; left: 125.5px; display: block;">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">Title</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div>
    <div id="sendInviteRequestDialog" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0" style="width: auto; min-height: 82px; height: auto;">Content</div>
    <div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div>
    <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div>
</div>

示例CSS：

.custom-dialog-1 .ui-widget-header {
    background: green;
}

Demo on jsFiddle

请注意，我使用的是background快捷方式，而不是background-color;这会重置所有背景属性，包括背景图像。标题栏的默认背景颜色实际上是图像。

Answer 2

如果要更改特定对话框上的标题，可以使用类似这样的内容，而无需修改/覆盖jquery ui css。 dialogClass选项配置对话框主体。

$('#dialog-div-name')
.parent()
.find('.ui-dialog-titlebar')
.addClass('custom-dialog-header-class');

Answer 3

接受的答案建议使用＆＃34; dialogClass＆＃34;但截至今天，这是一个弃用的属性（从jQuery UI v1.12开始）。

它已被＆＃34;类＆＃34;取代。 - http://api.jqueryui.com/dialog/#option-classes

示例：

$("#sendInviteRequestDialog").dialog({
    modal: true,
    classes: {
        "ui-dialog": "custom-dialog-1"
    }
});

如何设置具有特定ID的jQueryUI对话框标题？

3 个答案: