更改jQuery中標題欄的顏色彈出

Question

試圖將jquery pop中標題欄的背景顏色更改為綠色（在jsfiddle中顯示為藍色）...似乎無法得到...歡迎任何建議嗎？

    $("#dia").dialog({
    autoOpen: true,
    title:"Access Point",
    height: 200,
    width: 300,
    modal: false,
    draggable: true,
    position: [900, 150],
    dialogClass: "foo",
    //show: {effect: 'bounce', duration: 350, times: 3}
    show: {effect: 'fade', duration: 2000}
});

$(".ui-dialog-titlebar").css("background-color", "green");
$(".ui-dialog").css("background-color", "green");
$(".ui-dialog-title").css("background-color", "green");
$(".ui-dialog-content").css("background-color", "green");

請參閱http://jsfiddle.net/dEvKb/3254/

Answer 1

標題欄中將應用漸變，就像背景圖片一樣，您必須將其重置。

$(".ui-dialog-titlebar").css("background", "green");

要么

$(".ui-dialog-titlebar").css({'background-color': 'green', 'background-image': 'none'});

Answer 2

這是因為默認對話框標題具有背景圖像。 嘗試將其更改為以下代碼：

$(".ui-dialog-title").css("background", "green");
$(".ui-dialog-titlebar").css({"background": "green", "border": "none"});

看到這個小提琴：

http://jsfiddle.net/dEvKb/3258/

Answer 3

您不需要使用JS來更改背景顏色。

CSS WAY （推薦）

.ui-widget-header,.ui-dialog-titlebar,.ui-dialog,.ui-dialog-title,.ui-dialog-content{
    background: none green;
}

示例： http ： //jsfiddle.net/dEvKb/3257/

JS WAY

$(".ui-widget-header,.ui-dialog-titlebar,.ui-dialog,.ui-dialog-title,.ui-dialog-content").css("background", "green");

示例： http ： //jsfiddle.net/dEvKb/3259/