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?
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)
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','');