Transparent jQuery UI Dialog

Question

anybody knows how to make the ui dialog transparent ?

Answer 1

create a 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 your UI element.

Read more about MS IE filters on their blog.

Answer 2

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: jsBin (basic jquery, jquery ui, jquery ui css + custom css transparent class)