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

Answer 1

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