jQuery UI dialog overlay - how to set different background colors for different dialogs

Question

I have used different jQuery dialogs. For some dialogs I want a transparent background. If I change the background CSS in the .ui-widget-overlay class then it will apply to all the dialogs.

How to set different background colors for different dialogs?

Answer 1

Just create a style like the following and use the dialogClass option on those dialogs you want to have a transparent background. Of course you can make multiple styles and pass in whatever you want

<style type="text/css" media="screen">
    .transparent { background:transparent }
</style>

//make dialog with transparent background
$("#dialog").dialog({dialogClass:'transparent'});
//make default dialog
$("#dialog2").dialog();

Check demo site: http://jsbin.com/ifoja (basic jquery, jquery ui, jquery ui css + custom css transparent class)

Answer 2

There is only one overlay for all jQuery widgets. Therefor we have to change it's opacity on demand:

var overlayOpacityNormal = 0.3, overlayOpacitySpecial = 0;
$('#idOfDlg').dialog({
    modal: true,
    open: function()
    {
        overlayOpacityNormal = $('.ui-widget-overlay').css('opacity');
        $('.ui-widget-overlay').css('opacity', overlayOpacitySpecial);
    },
    beforeClose: function()
    {
        $('.ui-widget-overlay').css('opacity', overlayOpacityNormal);
    }
});