unique model background color for dialog jQuery UI

How do I change the model background color for

$dialog1 modal background to red 

$dialog2 modal background to blue

I do not want a global solution I need to change each to be unique.

Thanks for the help

http://jsfiddle.net/wMmmX/

    var $dialog1 = $('<div />');
    $dialog1.dialog({
        width: 100,
        height: 100,
        modal: true,
        resizable: false,
        position: [0, 0] ,
        open: function () {
            //$('.ui-widget-overlay').css({ 'background': 'red' });
            $(this).css({ 'background': 'red' }); // not changing modal back ground
        }
    });

    var $dialog2 = $('<div />');
    $dialog2.dialog({
        width: 100,
        height: 100,
        modal: true,
        resizable: false,
        position: [200, 200],
        open: function () {
            //$('.ui-widget-overlay').css({ 'background': 'blue' });
            $(this).css({ 'background': 'blue' }); // not changing modal back ground
        }

    });

Answers


try this one :

var $dialog1 = $('<div />');
$dialog1.dialog({
    width: 100,
    height: 100,
    modal: true,
    resizable: false,
    position: [0, 0] ,
    open: function () {
        $(this).dialog('widget').next('.ui-widget-overlay').css({ 'background': 'red' }); // not changing modal back ground
    }
});

Need Your Help

One or two numeric digits Regex

javascript regex numbers digits

I have the below code. It works only when I have 2 digits. If I have 1 digit doesn't work. I want to work in both cases: one or two digit.