Transparent jQuery UI Dialog

Question

Does anyone know how to make u dialog transparent?

Answer 1

create class:

.transparent_class { filter:alpha(opacity=50); /* for IE4 - IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE8 */ -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 

and add this class to the user interface element.

Find out more about MS IE filters on your blog.

Answer 2

Just create a style similar to the one below and use the dialogClass parameter in those dialogs that you want to have a transparent background. Of course, you can create multiple styles and convey 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 out the demo site: jsBin (base jquery, jquery ui, jquery ui css + custom css transparency class)