Set JQuery UI modal dialog overlay background color

Question

When I load the dialog the background gets a little bit grey. I would like to make it darker, but I cannot find a property that is responsible for that. How can I achieve this?

Voroshilov

Answer 1

That is in this css element:

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

it is on line 294 of: jquery-ui-1.8.11.custom.css

Arapaima

I wouldn't recommend editing the jQuery CSS - it'll mean dropping in a new version will be a pain. I'd recommend providing an override in a CSS file you load AFTER the jQuery one that defines your custom style for the same ui-widget-overlay class. – Dorison

Unfortunately, the jQueryUI CSS adds visual style attributes... even to its base CSS which is not supposed to have any presentation styles. This means whenever you use the jQueryUI package you'll have to override every single attribute that gets overwritten by jQuery, which is not only tedious but also a moving target (if you ever upgrade jQuery versions, you'll have to verify all your styles again). This breaks the D.R.Y. principle (declaring the same styles twice, once in your normal stylesheet, and again in the override). – Fer

This didn't work for me... I needed to use Blender's version of the class, which has "!important" in a few places. – Paramecium

You should extend your widget overlay to 100% width/height. – Pentagram

It already is by default. This is to override colors @Pentagram – Arapaima

Mine wasn't I found the solution in another post. @Neal – Pentagram

Answer 2

Add this CSS to your stylesheet:

.ui-widget-overlay
{
  opacity: .50 !important; /* Make sure to change both of these, as IE only sees the second one */
  filter: Alpha(Opacity=50) !important;

  background: rgb(50, 50, 50) !important; /* This will make it darker */
}

Hui

that is already in the stylesheet as u see on line 294 (see my answer) – Arapaima

I know, I'm just overriding it (see the !important at the end). I usually don't like fiddling with 1000 line CSS files, so I override things often. – Hui

but if u just go into inspect element in firebug or chrome u see exactly what line the issue is ^_^ – Arapaima

I use Chrome, so I'm familiar with Inspector ;) I like to organize things into separate files, that's all. – Hui

@Hui - great solution. I plugged this into my site and it kinda works but there's a light grey stripe that runs horizontally across the whole overlay. Any idea why this is happening? – Multicolored

@Spinlock: I had the same thing. You need to also add this to the class: "background: none;" – Paramecium

should use background instead background-color – Bowser

@NabiK.A.Z.: Why? – Hui

@blender, When I use background-color, the result you can see here aplud.com/db3ug but when I add background-image:none; the bug fixed. so must use background-image:none; or use background: rgb(50, 50, 50); for ignoring background image. – Bowser

Answer 3

Easiest way is to use the themeroller.

Decorate

+1. Themeroller is the only way to go. The problem everyone has with the light band in the background is the background image (which is too light). I had Themeroller generate a new image (50% of #000000) which looks much better when transparent than the default of #aaaaaa. Both the CSS and image are fixed when using this approach, and you get a URL in the CSS file you can use to edit the theme again. – Rosanarosane

Answer 4

Like @spinlock I have the strip that run horizontally :

To remove the strip and use a custom background color you can do like this on the open event :

open : function(event, ui){
    $("body").css({
        overflow: 'hidden'
    });
    $(".ui-widget-overlay").css({
        background:"rgb(0, 0, 0)",
        opacity: ".50 !important",
        filter: "Alpha(Opacity=50)",
    });
},
beforeClose: function(event, ui) {
    $("body").css({ overflow: 'inherit' })
}

Abraham

Or maybe you could just add a class and then remove it. Still a good call bro! upvoted. – Paring

Answer 5

What actually worked for me :

//in dialog setting code
open: function(event, ui) {
  $('.ui-widget-overlay').css({ opacity: '.5' });
},

I will not suggest to setup opacity for a dialog directly in CSS, as it will affect any dialog open across your website, which may not be a desired result.

Particularity

Answer 6

I had spinlock's problem with Blender's solution, but changing "background-color" to "background" fixed that. I suspect the reason is that the original (jQuery-UI) CSS uses that PNG graphic.

Sexy

Answer 7

Easiest way is :

open: function() {
   $(this).closest('[role="dialog"]').css({ opacity: '.9' }); // 設置透明度
},

Full code

var myDialog = $('<div id="_jwuDialog"></div>').dialog({
    modal: false,
    title: "標題",
    resizable: true,
    width: 300,
    height:120,
    position: { my: "center", at: "bottom"},
    open: function() {
        $(this).closest('[role="dialog"]').css({ opacity: '.7' }); // 設置透明度
        $(this).html('設置文字');
    },
});

Penurious