CODEWITHSUNDEEP
jquery
shaz
shaz

Reputation: 21

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').dialog('open');
$('#dialog_empty').css('display','');

Upvotes: 2

Views: 19874

Answers (2)

Nikolas Stephan
Nikolas Stephan

Reputation: 1290

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.

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382696

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.

Upvotes: 3

Related Questions