Set JQuery UI modal dialog overlay background color

问题

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?

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

回答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 */
}

回答3:

Easiest way is to use the themeroller.

回答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' })
}

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

回答6:

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.

来源：https://stackoverflow.com/questions/5583995/set-jquery-ui-modal-dialog-overlay-background-color

标签

jquery

jquery-ui