RadWindow Modal Semi-Transparent

[Andrew Currie]

Hi,

I am trying to set the background of my modal window as semi-transparent.  I am finding that by default it is solid.  I have tried Outlook skin and Vista skin.  The functionality of modal works I just want a semi-transparent background.

I tried following the documentation at http://www.telerik.com/help/aspnet/window/advancedskinningtutorial.html (relevant section pasted below) but I have no .RadWModalImage class in the css files so I'm stuck.  I tried adding one to my page (I thought maybe it isn't in the file but, if is in the code so therefore if added would take effect) but no joy.

I am using Q2 2009 telerik for .net 3.5.

Thanks

3.0.2. Setting semi-transparent background to the modal dialog with CSS

The class that controls the modal background of Telerik RadWindow when Modal is set to true or radalert(), radprompt() or radconfirm() are used. Currently this class uses a semi-transparent image, but this could be easily overridden by a slight modification of the above class and give the Telerik RadWindow a totally new cross-browser Web2.0 looks.

Locate the .RadWModalImage class in Window.css and replace all of its css properties with the ones below:

CSS
.RadWModalImage { background: black; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); opacity: .5; -moz-opacity: .5; }

The background property specifies the background color, and the three that follow - the opacity rate. The filter property is a Microsoft proprietary one and is part of the DirectX Multimedia Filters and Transitions. You need to modify the opacity value in the brackets - it should be an integer from 0 to 100, 100 being totally opaque.

[Martin]

Hi Andrew Currie,

You have referred to the wrong manual, that's why you were unable to achieve the effect you needed. The topic is for the classic RadWindow, and you are using RadWindow for ASP.NET AJAX, where things are a bit different. The class you need to play with is .TelerikModalOverlay, i.e:

div.TelerikModalOverlay
{
    filter: alpha(opacity=50) !important;
    opacity: .5 !important;
    -moz-opacity: .5 !mportant;
}

Make sure you use the !important flag when setting the new values to the opacity properties, because you need to make the selector heavier than the our default settings, otherwise your new values will not apply.

Regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andrew Currie]

Thanks for the quick response though it hasn't fixed the issue.

Since I posted I have been testing a number of scenarios and have found that the semi-transparent background is working by default on every machine except mine!  Very annoying.  I did think my IE wasn't quite right before and this is just something to add to the list unfortunately.  That would seem to be the problem.

Thanks

[Martin]

Hi Andrew Currie,

Actually, this is the way to set custom transparency to the modal overlay of RadWindow, as this is the only selector that controls that particular element.

However, I am starting to think that you need the window itself semi transparent - is it so? If this is your requirement, the selector you need to set to semi-transparent is .RadWindow, not the overlay element:

.RadWindow
{
    filter: ;
    opacity: ;
    -moz-opacity: ;
}

If you are not sure how to achieve this, send me a sample page along with exact description of what your requirements are and which one you need to set to semi-transparent - the window or the overlay and I will do this for you.

Regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andrew Currie]

Hi, no it is definitely just the background to the window that I want transparent.  In anycase, as I say, it works fine in every other machine I have tried it with but not mine.  I mine the background is solid grey no filter/alpha is applied.

I am happy to leave this as is.

Thanks all for your time