29

I would like to pop a modal dialog using jquery ui where the overlay is completely black. I know that I can set this in the theme, but I do not want all dialogs to have a black overlay. Just one of them.

Is there a way to configure a dialog's background (overlay) color on a per-dialog basis? Perhaps when it is created?

TIA

mtmurdock
  • 12,756
  • 21
  • 65
  • 108
  • possible duplicate of [Darker background in Jquery UI dialog](http://stackoverflow.com/questions/5583995/darker-background-in-jquery-ui-dialog) – Dave Jarvis Apr 28 '13 at 00:36

5 Answers5

45

You can use the open and close events of the ui-dialog.

$("#your-dialog").dialog(
{
    autoOpen: false, 
    modal: true, 
    open: function() {
        $('.ui-widget-overlay').addClass('custom-overlay');
    }          
});

And add the required styling in the CSS. Example:

.ui-widget-overlay.custom-overlay
{
    background-color: black;
    background-image: none;
    opacity: 0.9;
    z-index: 1040;    
}
T.Todua
  • 53,146
  • 19
  • 236
  • 237
mohitp
  • 1,305
  • 2
  • 16
  • 20
  • 2
    The only problem with this is the "z-index: 1040" places the overlay on top of the dialog. Remove z-index and it works fine. – Marcus May 09 '14 at 15:08
  • One small improvement, selector `$('.ui-widget-overlay')` will find all overlays for all opened dialogs. You can extend jQuery UI with a new method for getting the overlay for your particular dialog – Fisk Mar 05 '19 at 13:28
  • like this `$.widget("ui.dialog", $.ui.dialog, { getOverlay: function() { return (this.overlay) ? this.overlay.$el : $(); } });` and calling `$("#your-dialog").dialog('getOverlay')` than to do what you want. – Fisk Mar 05 '19 at 13:45
12

The overlay element is an immediate sibling of the dialog widget and exposes the ui-widget-overlay class, so you can match it and modify the background color on a per-dialog basis:

$("#yourDialog").dialog("widget")
                .next(".ui-widget-overlay")
                .css("background", "#f00ba2");

You can see the results in this fiddle.

Frédéric Hamidi
  • 258,201
  • 41
  • 486
  • 479
11

The background of the JQuery dialog is a div that has the class "ui-widget-overlay". The key styles you want to adjust is "opacity", "filter" and "background-color" ("opacity" and "filter" are two different ways of setting opacity for the different browsers.) You can either adjust the class definition or do the following in the dialog definition:

$("div#MyDialog").dialog({
    title: "My Dialog Title",
    open: function (event, ui) {
        $(".ui-widget-overlay").css({
            opacity: 1.0,
            filter: "Alpha(Opacity=100)",
            backgroundColor: "black"
        });
    },
    modal: true
});
Michael Erickson
  • 4,217
  • 2
  • 23
  • 10
3

Change background:

$(".ui-widget-overlay").css({background: "#000", opacity: 0.9});

Restore background to CSS values:

$(".ui-widget-overlay").css({background: '', opacity: ''});
Ronny Sherer
  • 8,349
  • 1
  • 22
  • 9
3

Frederic's answer was very close but it left me with one problem: I had more than one dialog on that page, and after I changed the overlay for the one dialog, it changed all of them until the page was reloaded. However, it did give me an idea;

First I stored the default values into variables (page scope), and then set my custom style.

var overlay = $(".ui-widget-overlay");
baseBackground = overlay.css("background");
baseOpacity = overlay.css("opacity");
overlay.css("background", "#000").css("opacity", "1");

Then when the dialog is closed, I restored those values.

$(".ui-widget-overlay").css("background", baseBackground).css("opacity", baseOpacity);

The main reason for storing them in variables (as opposed to resetting them to explicit values) is for maintainability. This way, even if the site.css changes, it will work.

Thanks for your help!

mtmurdock
  • 12,756
  • 21
  • 65
  • 108