Set JQuery UI modal dialog overlay background color dynamically

Question

i want change the page packground color when the modal dialog loadui-widget-overlay and property background-color
when i set it with css it Works fine

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

demo-with css

but i want change it dynamically Because i have some modal dialog and i want change it only One of them
i try use jquery but it not work

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

demo-with jquery

why?

Solution 1

DEMO

Problem with your code

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

you set background to white but the element with class ui-widget-overlay doesnot exist at that time in the DOM.

It works with CSS as whenever class ui-widget-overlay is in DOM css rules will work.

But using .css() in jQuery puts inline styling so if the element is not present in DOM than no inline styling can be added.

Solution

After the Dialog is open you can perform this code as class ui-widget-overlay exists now.

Working code

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

Solution 2

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

ui-widget-overlay doesn't exist at that point in your code, so I moved it.