Search code examples
overlayjquery-ui-dialog

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

Solution

  • 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!