对话框jQuery UI的独特模型背景颜色

Question

如何更改

的模型背景颜色

$dialog1 modal background to red 

$dialog2 modal background to blue

我不想要一个全局解决方案，我需要将每个解决方案都变得独一无二。

感谢您的帮助

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
        }

    });

Answer 1

试试这个：

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
    }
});