2016-09-25 43 views
1

我已經構建了一個js對話框來充當顏色選擇器。一切運行良好,除了當用戶選擇顏色色板時,我似乎無法設置對話框標題欄的顏色。JavaScript在對話框加載後設置對話框標題欄顏色

還希望得到一個如何停止從被調暗,不透明度設爲所以會出現昏暗稱爲對話框的父窗口。

當用戶在對話框內選擇顏色樣本的對話外一個函數被調用,以暫時設置的主叫窗口的顏色。代碼如下:

function changeColor(themeColor) { 
    // set colors on parent window that called the dialog 
    $("#top-wrapper").css("background-color", themeColor); 
    $("#md-page-head").css("background-color", themeColor); 
    $("#bottom-wrapper").css("background-color", themeColor); 

    // looking for code that would go here to set the dialog's title bar color 
    // have tried various iterations to no avail 
} 

對話框的代碼如下所示:

$('#qktheme').dialog({ 
    width: 500, 
    resizable: false, 
    show: 'slide', 
    autoOpen: false, 
    modal: true, 
    buttons: [{ 
     text: "Save", 
     tabIndex:-1, 
     'class':'dialog3_buttons', 
     click: function(event) { 
      // save the new theme color choice - to be coded 
      $(this).dialog("close"); 
      return true; 
     } 
    }, { 
     text: "Cancel", 
     tabIndex:-1, 
     'class':'dialog3_buttons', 
     click: function(event) { 
      // put back the original theme color - to be coded 
      $(this).dialog("close"); 
      return false; 
     } 
    }] 
}) 
.height("auto"); 
+0

如果你不想背景使用'modal:false'。不太清楚顏色應該如何工作 – charlietfl

+0

謝謝 - 這對於次要問題非常適用。非常感激。 – Tim

回答

0

你可以使用F12開發人員工具來檢查對話框的標題欄中的元素,並檢查ID(或類)應用到該元素,然後您可以使用jQuery id或類選擇器來查找標題欄併爲其設置顏色。

+0

我有元素的id。嘗試使用js來設置顏色到目前爲止還沒有奏效。需要更具體的建議。 – Tim

0

找到解決我的問題。

$(".ui-dialog").find(".ui-widget-header").css("background", "darkgreen");