jquery blankout / grayout the page where dialog bo

Question

How can I blankout the page where I show the dialog box. below is my code HTML:

<style>
.ui-dialog, .ui-dialog-content {
 border:1px solid #cde68c;
 border-bottom:0px;
 background-color: white !important;
 color: #333;
 font: 12px/180% Arial, Helvetica, sans-serif;
}
.ui-dialog-titlebar {
 display:none;
}
#ui-dialog-title-dialog {
 color: yellow !important;
 text-shadow: none;
}
.ui-dialog-buttonpane {
 border:1px solid #cde68c;
 border-top:0px;
 margin-bottom: 1%;
}

</style>
        <div id="dialog">
            <p><span id="emailNotice"></span></p>
        </div>

Javascript:

$j(document).ready(function() {

    $j('#dialog').dialog('open');
    $j('#emailNotice').html('show some notice text abcd');  

    $j('#dialog').dialog({
        modal:true,
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                $j(this).dialog("close");
            },
            "Cancel": function() {
                className: 'cancelButtonClass',
                $j(this).dialog("close");
            }
        }
    });
});

TRIED

<style>
.ui-dialog, .ui-dialog-content {
 border:1px solid #cde68c;
 background-color: white !important;
 color: #333;
 line-height: 180%;
 font-family: Arial, Helvetica, sans-serif;
}
.ui-dialog-titlebar {
 display:none;
}
#ui-dialog-title-dialog {
 color: yellow !important;
 text-shadow: none;
}
.ui-dialog-buttonpane {
 border:1px solid #cde68c;
 border-top:0px;
 margin-bottom: 1%;
}

ui-widget-overlay { 
    background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
    opacity: 50;
    filter:Alpha(Opacity=50);  
}
</style>

ALSO TRIED

$j('#dialog').dialog('open');
                 $j("#dialog").dialog("widget")
                 .next(".ui-widget-overlay")
                 .css("background", "#f00ba2");
....
....

Answer 1

Change the default jQueryUI class like this:

.ui-widget-overlay { 
    background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x !important;
    opacity: 100 !important;
    filter:Alpha(Opacity=100) !important;  
}

Just change the color and opacity to what you like and this will be applied to the page when the modal opens.

If the !important don't work you have an issue with your setup.

Maybe you don't have jQueryUI fully functional. Make sure you have both the jQueryUI js and css files linked/referenced in your element.