如何設置jQuery對話框的標題欄的背景顏色？

-3

我的頁面有2個jQuery dialogs。當生成的頁面都<div>元素具有相同class定義：如何設置jQuery對話框的標題欄的背景顏色？

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
    <span class="ui-dialog-title" id="ui-dialog-title-dvMonitor">Monitor Status</span> 
</div> 

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
    <span class="ui-dialog-title" id="ui-dialog-title-selectMsg">Error</span> 
</div>

我需要第二個對話框的標題的背景設置爲紅色。該對話框將顯示第二個<div>的span元素中指定的「錯誤」消息。

我還添加了邏輯在我.js文件上的失敗條件：

$('#ui-dialog-title-selectMsg').parent('.ui-dialog-titlebar').css('background-color', 'red');

但我還是有以下彈出：

我會怎麼做呢？

來源

2016-08-24 gene

在div上爲第二個對話框添加一個error類。然後在你的樣式表中寫下以下內容。

.error { 
    background: red; 
}

您可以從red改變顏色使用十六進制代碼一個更好的色彩。例：

.error { 
    background: #EC485B; 
}

這會給你更多的是磚紅色的。使用十六進制顏色代碼來查找適合您應用程序的紅色乘坐陰影。

來源

2016-08-24 20:20:02 Sean

我可以只添加'風格=「背景：紅色「到第二個對話框？ – gene

剛纔做的和對話框背景本身變成了紅色 – gene

@gene你可以這樣做，但這不是最佳做法。你應該把你的CSS寫在一個單獨的文件中。忽略那些說jQuery做的人。從長遠來看，使用JavaScript進行風格將會非常昂貴，而且這是一個壞習慣。它會讓你的網站變慢。 – Sean

我建議的CSS解決方案，這一點 -

您可以添加樣式UI的對話框的標題 - selectMsg

#ui-dialog-title-selectMsg { 
    background: red; 
}

或者你可以使用CSS僞類

.ui-dialog-titlebar:nth-child(2) > .ui-dialog-title { 
    background: red; 
}

我假定你w anted給背景顏色跨度。

如果你想給的背景顏色爲標題欄格，使用下面的CSS：

.ui-dialog-titlebar:nth-child(2){ 
     background: red; 
}

來源

2016-08-24 20:28:10 Arun

，如果你想用jQuery使用下面的語法來做到這一點，

$('#ui-dialog-title-selectMsg').parent('.ui-dialog-titlebar').css('background-color','red')

，或者你wnat用戶內聯，然後添加

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" style="background:red"> 
     <span class="ui-dialog-title" id="ui-dialog-title-selectMsg">Error</span> 
</div>

或你添加一個類的第二個對話說'err-bg '然後給它的風格。

.err-bg{ 
background: red; 
}

儘量避免內聯css。因爲它不是推薦

來源

2016-08-24 20:28:30

我試圖將語法插入到我的.js文件中，但對話框仍然沒有「紅色」標題。看看我在我的問題描述中添加的圖片 – gene

$（'＃ui-dialog-title-selectMsg'）。parent（'。ui-dialog-titlebar'）.css（'background'，'none'）。使用這個，然後$（'＃ui-dialog-title-selectMsg'）。parent（'。ui-dialog-titlebar'）.css（'background-color'，'red'）@gene –

當設置背景爲無，我開始得到一個JavaScript錯誤，說我的功能，我定義所有的代碼沒有定義 – gene

添加

#ui-dialog-title-selectMsg { 
    color: red; 
}

到您的樣式表。如果要使用不同的顏色，你可以使用http://www.colorpicker.com/和複製顏色的十六進制代碼，只需添加爲如下（注意包括hashtag）：

#ui-dialog-title-selectMsg { 
    color: #E0412F; 
}

來源

2016-08-24 20:29:18

如何設置jQuery對話框的標題欄的背景顏色？

回答

相關問題