52

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?

Dave Jarvis
  • 30,436
  • 41
  • 178
  • 315
Vonder
  • 4,033
  • 15
  • 44
  • 61

7 Answers7

50

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

Naftali
  • 144,921
  • 39
  • 244
  • 303
  • 30
    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. – Bernhard Hofmann Apr 07 '11 at 16:25
  • 4
    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). – Matt Brock Sep 12 '13 at 21:37
  • This didn't work for me... I needed to use Blender's version of the class, which has "!important" in a few places. – Mike Gledhill Dec 16 '15 at 15:49
  • You should extend your widget overlay to 100% width/height. – GeorgiG Dec 27 '16 at 10:22
  • It already is by default. This is to override colors @GeorgiG – Naftali Dec 27 '16 at 10:49
  • Mine wasn't I found the solution in another post. @Neal – GeorgiG Dec 27 '16 at 12:39
35

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 */
}
Blender
  • 289,723
  • 53
  • 439
  • 496
  • that is already in the stylesheet as u see on line 294 (see my answer) – Naftali Apr 07 '11 at 16:03
  • 6
    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. – Blender Apr 07 '11 at 16:07
  • but if u just go into inspect element in firebug or chrome u see exactly what line the issue is ^_^ – Naftali Apr 07 '11 at 16:10
  • I use Chrome, so I'm familiar with Inspector ;) I like to organize things into separate files, that's all. – Blender Apr 07 '11 at 16:15
  • 6
    @Blender - 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? – spinlock Jan 30 '13 at 01:33
  • 1
    @Spinlock: I had the same thing. You need to also add this to the class: "background: none;" – Mike Gledhill Dec 16 '15 at 15:48
  • should use `background` instead `background-color` – Nabi K.A.Z. Apr 21 '18 at 22:27
  • @NabiK.A.Z.: Why? – Blender Apr 22 '18 at 02:10
  • @blender, When I use `background-color`, the result you can see here http://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. – Nabi K.A.Z. Apr 22 '18 at 18:54
7

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' })
}
bedomon
  • 330
  • 3
  • 11
7

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.

MaxZoom
  • 7,619
  • 5
  • 28
  • 44
7

Easiest way is to use the themeroller.

nfechner
  • 17,295
  • 7
  • 45
  • 64
  • +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. – NightOwl888 Apr 15 '15 at 08:43
5

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.

David M. Anderson
  • 131
  • 2
  • 2
0

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('設置文字');
    },
});
kkasp
  • 113
  • 1
  • 9