how do you set the background of the screen when you popup a jquery ui dialog

Question

in this example, the background of the screen changes when you load up the dialog. How can i set this on my jquery dialog. i dont see anywhere in the API where i can set this background behavior when the dialog opens.

Answer 1

Define ui-widget-overlay in your CSS.

Answer 2

in css/ui-lightness/jquery-ui-1.8.5.custom.css (assuming that's the file version you have, if not, look for your file version of this file)

around line 293 where it says /* Overlays */

/* Overlays */
.ui-widget-overlay { background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat; opacity: .50;filter:Alpha(Opacity=50); }
.ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; background: #000000 url(images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

You can change the background property there