对话框标记(覆盖阴影,边框,背景,标题栏,关闭按钮,拖动手柄等)被添加到您拨打.dialog()
的div的外部。所以#sendInviteRequestDialog .ui-dialog .ui-widget-header
将无法按预期工作。
风格化特定的对话框中,使用dialogClass
选项:
指定的类名(S)将被添加到对话框中, 额外的主题化。
示例代码:
$("#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
;这会重置所有背景属性,包括背景图像。标题栏的默认背景色实际上是一个图像。