Can the notification control...

[Derek]

I can't seem to get a background of 100% width and height and a 30% opacity around the notification control. Is it even possible to do this? I realize it's just like a modal popup, but that's that point. I would love it if my notification controls could match the site more. Here is my code:

 

<style type="text/css">

.notificationContent

{

display: inline-block;

zoom: 1;

*display: inline;

width: 160px;

vertical-align: bottom;

}

.newBackground

{

width: 100%;

height: 100%;

background-color:#666;

filter:alpha(opacity=30);

opacity:0.7;

-moz-opacity:0.7;

}

</style>

<div class="newBackground"><telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="240"  Height="100" OnClientShowing="OnClientShowing"

OnClientHidden="OnClientHidden" LoadContentOn="PageLoad" AutoCloseDelay="60000"

 Title="Continue Your Session" TitleIcon="" Skin="Office2007"

 EnableRoundedCorners="true" Animation="Fade" CssClass="newBackground">

 <ContentTemplate>

 <div class="notificationContent">

 Time remaining:



<span id="timeLbl">60</span>

<telerik:RadButton Skin="Office2007" ID="continueSession" runat="server" Text="Continue Your Session" Style="margin-top: 10px;">

</telerik:RadButton>

</div>

</ContentTemplate>

</telerik:RadNotification></div>

[Svetlina Anati]

Hello Derek,

 As far as I understand you want to make a modal overlay by using the DIV you have declared. If so, you should go through the following steps in addition to what you have done so far:

1) Add the following style to have cross browser display of the 100% height:

html, body, form
{
    height: 100%;
    margin: 0;
    padding: 0;
}

2) Set absolute position and display none to the DIV:

<div class="newBackground" style="display: none; position: absolute; z-index: 10;
      top: 0; left: 0" id="overlay">

3) Dynamically show and hide the DIV when you show and hide the RadNotification:

function OnClientShowing(sender, args) {
         $get("overlay").style.display = "";
     }
     function OnClientHidden(sender, args) {
         $get("overlay").style.display = "none";

     }

For your convenience I attached a working sample, let me know how it goes and whether this is what you need.

Best wishes,
Svetlina
the Telerik team