jQuery dialog background change

Question

Duplicate of http://stackoverflow.com/questions/1886678/jquery-ui-dialog-overlay

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?

I wrote the below code but it still taking the background of class ".ui-widget-overlay"

$("#dialog_empty").dialog({  
    dialogClass:'transparent',       
    resizable: false, 
    draggable: false, 
    modal: true,    
    height: 0, 
    width: 0,
    autoOpen: false,
    overlay: {
     opacity: 0
    }
});

$('#dialog_empty').dialog('open');
$('#dialog_empty').css('display','');

Answer 1

You need to use the ! important of css to prioritize your css over that of dialog's original for a given css code. Here is an example:

<style>
  .mybg
  background:#ff0000 !important;
</style>

Now you need to apply mybg class to the dialog.

Answer 2

The following line of code will give all dialogs that have the transparent class set a transparent background, which I believe is what you want.

$('.transparent').css('background-color','transparent')

You can obviously modify this by replacing transparent by a colour, or replacing the .transparent by another class.