CODEWITHSUNDEEP
overlayjquery-ui-dialog
mtmurdock
mtmurdock

Reputation: 13062

jQuery: Set modal dialog overlay color

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

Upvotes: 29

Views: 93823

Answers (5)

mohitp
mohitp

Reputation: 1305

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

Upvotes: 45

Ronny Sherer
Ronny Sherer

Reputation: 8601

Change background:

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

Restore background to CSS values:

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

Upvotes: 3

mtmurdock
mtmurdock

Reputation: 13062

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!

Upvotes: 3

Michael Erickson
Michael Erickson

Reputation: 4445

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

Upvotes: 11

Frédéric Hamidi
Frédéric Hamidi

Reputation: 262919

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.

Upvotes: 12

Related Questions