設置JQuery用戶界面模式對話框疊加背景色動態

Question

我想改變頁面packground顏色，當模態對話框loadui小部件疊加和財產background-color
當我用CSS設置它，它工作正常

.ui-widget-overlay { 
    background-color: white; 
} 

demo-with css

，但我想動態地改變它，因爲我有一些模態對話框，我想改變它只是其中
我嘗試使用jQuery，但它不能正常工作

的

$('.ui-widget-overlay').css('background', 'white'); 

demo-with jquery

爲什麼呢？

Answer 1

DEMO

問題與您的代碼

$('.ui-widget-overlay').css('background', 'white'); 

設置background到white但ui-widget-overlay類的元素在DOM那個時候不列入存在。

它與CSS一起工作，因爲每當類ui-widget-overlay是在DOM CSS規則將工作。

但使用.css()在jQuery把inline styling所以如果該元素不存在於DOM中比不存在inline styling可以添加。

解決方案

的對話框後，開放時間類ui-widget-overlay現在存在可以執行這個代碼。

工作代碼

$("#dialogDiv").dialog({ 
    autoOpen: false, 
    modal: true 
}); 
$("#btn").click(function() { 
    $("#dialogDiv").dialog('open'); 
    $('.ui-widget-overlay').css('background', 'white'); //write background color change code here 
}); 

Answer 2

http://jsfiddle.net/dmGe5/2/

ui-widget-overlay不會在你的代碼點存在，所以我把它。