2

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");
....
....
Asim Zaidi
  • 27,016
  • 49
  • 132
  • 221
  • 2
    not sure exactly what you mean by 'blank out' but there is a css class that jquery ui dialog assigns to the overlay for the dialog, ui-widget-overlay, when you have modal set to true. it can be modified to change the style of the overlay div – Mike Jul 06 '12 at 00:18
  • modla is set to true but it just doesnt work – Asim Zaidi Jul 06 '12 at 00:32
  • is there anything under the dialog at all? can you post a jsfiddle? – Mike Jul 06 '12 at 00:33
  • 1
    @Autolycus Can you paste the entire '' ? – Drakkainen Jul 06 '12 at 00:46

1 Answers1

2

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.

Drakkainen
  • 1,142
  • 11
  • 25