如何設置具有特定ID的jQueryUI對話框標題？

我想在jQueryUI對話框標題中改變TitleBar的風格，例如我想要綠色背景 - 它只應用於ID指定的一個對話框。這就是爲什麼我寫了這樣的事情：如何設置具有特定ID的jQueryUI對話框標題？

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

但遺憾的是它沒有工作。我試過這樣的：

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

但它也沒有解決我的問題。我究竟做錯了什麼？預先感謝您。

來源

2014-04-05 Radek Anuszewski

對話框標記（覆蓋陰影，邊框，背景，標題欄，關閉按鈕，拖動手柄等）被添加到您撥打.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;這會重置所有背景屬性，包括背景圖像。標題欄的默認背景色實際上是一個圖像。

來源

2014-04-06 11:20:29

如果你想改變特定對話框中的標題，你可以使用類似這樣的東西，而無需修改/重寫jquery ui css。 dialogClass選項配置對話框主體。

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

來源

2015-10-13 00:11:27 vbranden

如何設置具有特定ID的jQueryUI對話框標題？

回答

相關問題