jQuery Dialog Opacity

Question

I work with jQuery and I want to add css opacity on jQuery dialog, but content must show normally

In other word I want to background must be transparent and words and button must show normally

Answer 1

The CSS property 'opacity' will make every child transparent also.

You can use instead background-color and use rgba for that on the dialog div (.ui-dialog if I'm not mistaken), for example:

.ui-dialog {
     background-color: rgba(255,255,255,0.5);
}

That means a white color (255,255,255) with half opacity (0.5, goes from 0 to 1, 0 meaning invisible, 1 meaning solid).

Answer 2

It's kinda hard without code, but since I'm in a good mood, I will give it a try.

You probably have an element that is the dialog, I am guessing <div id="dialog">...</div>. You can set the alpha opacity for the background like this:

#dialog {
     background: rgb( 255, 0, 0 ); /* fallback for not-rgba-supporting browsers */
     background: rgba( 255, 0, 0, 0.5 );
}

Change 0.5 to what the desired opacity.

Answer 3

Try this css code for dialog div-

/* default fallback */
background: rgb(255, 255, 255) transparent;
/* nice browsers */
background: rgba(255, 255, 255, 0.8);
/* IE 6/7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
/* IE8 */    
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";