This is a migrated thread and some comments may be shown as answers.

Can the notification control...

1 Answer 184 Views
Notification
This is a migrated thread and some comments may be shown as answers.
Derek
Top achievements
Rank 1
Derek asked on 27 Jul 2011, 04:14 PM

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
  
  

1 Answer, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 28 Jul 2011, 03:26 PM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Tags
Notification
Asked by
Derek
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Share this question
or