jquery blankout / grayout the page where dialog box is showing

问题

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");
....
....

回答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.

来源：https://stackoverflow.com/questions/11354260/jquery-blankout-grayout-the-page-where-dialog-box-is-showing

标签

jquery

jquery-ui

modal-dialog