如何更改jquery ui中的對話框標題顏色？

$div = $('<div id="error" title="Error">'); 
$div.append('<p>Hi</p>'); 

$div.dialog({ 
    modal: true, 
    maxHeight:500, 
});

我可以更改對話框的標題的背景顏色不知何故這樣？：

$div.dialog({ 
     modal: true, 
     maxHeight:500, 
    }).find(".ui-dialog-titlebar").css("background-color","red");

懷疑這一點，就會有被覆蓋不管它是什麼風格你正在設置它。我的建議是找到它的樣式，創建另一個名稱不同的名稱並將其替換到jQuery中。 – Gjohn

的ThemeRoller ?: http://jqueryui.com/themeroller/ –

@Gjohn - 內聯樣式覆蓋CSS樣式，所以這種變化應該工作。 milandjukic88 - 查看您設計的代碼是否可行的最簡單方法是嘗試。 :-P –

使用prev()，而不是find()因爲該元素是不是裏面$div：

$div.dialog({ 
    modal: true, 
    maxHeight:500, 
}).prev(".ui-dialog-titlebar").css("background","red");

而且我用background覆蓋所有其他eleme像background-image

2014-01-24 16:13:37 DaniP

它的工作！謝謝！ – milandjukic88

嘿..我如何在上面的例子中添加背景顏色和背景邊框？ –

@RadhikaKulkarni嘗試的CSS，而不是（）方法添加具有.addClass（） – DaniP

做的另一種方法NTS是：

定義你的造型類 - myTitleClass

定義的CSS爲

. myTitleClass .ui-dialog-titlebar { 
      background:red; 
    }

，並添加自定義類對話框初始化函數：

 $("#dialog").dialog({ 
     autoOpen: false, 
     dialogClass: 'myTitleClass' 
    });

的jsfiddle - （但與其他示例代碼）

2014-01-24 16:39:16 user1428716

+1不錯的一種方法 – DaniP

我覺得這是最好的答案，因爲它允許具有不同的CSS多個對話，而不必訴諸於更改一個類蒼蠅。 –

此方法允許更改每個對話框設計，同時在CSS文件中保留複雜性。不僅作爲扎克提到的，你可以簡單地通過改變類的名字有多種風格，但你也可以簡單地通過改變源CSS文件提供了完全不同的設計和顏色的選擇。這個答案呈現了我迄今發現的最佳方法。 –

最簡單的辦法是這樣的： -

.ui-dialog-titlebar { 
     background:red; 
}

2014-08-11 13:50:29 Mikeys4u

它可以工作，但它會強制你在頁面上的每個對話框上都有相同的背景。我認爲@ user1428716答案是最好的方法。 –

回答