Can the notification control...

2 posts, 0 answers
  1. Derek
    Derek avatar
    1 posts
    Member since:
    Jun 2011

    Posted 27 Jul 2011 Link to this post

    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
      
      
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 28 Jul 2011 Link to this post

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top