jQuery dialog background change

Duplicate of 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').开发者_如何学Godialog('open');
$('#dialog_empty').css('display','');

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.

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.