jQuery: Set modal dialog overlay color

Question

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

Fanaticize

possible duplicate of Darker background in Jquery UI dialog – Dinodinoflagellate

Answer 1

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!

Fanaticize

So the overlay element is reused for all dialog widgets... good catch :) – Turgite

This same mechanic can be accomplished by adding and removing a css class that sets these values (which is what I ultimately ended up implementing). – Fanaticize

Answer 2

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;    
}

Wheatley

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. – Felske

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 – Anaphrodisiac

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. – Anaphrodisiac

Answer 3

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.

Canister

Hmmm when I do this my overlay appears at the bottom of the page extending the page height, rather than behind my original dialog – Scatology

Actually this is happening to me doing it via CSS as well so there is nothing wrong with the JavaScript above. – Scatology

Answer 4

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
});

Chantalchantalle

How does JQ UI use an image for their overlay? – Lunula

Answer 5

Change background:

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

Restore background to CSS values:

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

Turgescent

Simpler Solution. Thanks! – Magpie