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