How to make a modal RadNotification

RELATED TO:

Article information

Article relates to

 RadNotification for ASP.NET AJAX

Created by

 Marin Bratanov, Telerik

Created on

 7th of October, 2011


HOW-TO:

Make the RadNotification display a modal overlay.

DESCRIPTION:  

The RadNotification is a lightweight control and does not have a built-in modality (i.e. no Modal property).


RadControls for ASP.NET AJAX


SOLUTION:

February 15, 2021: For a new version please check out the Create a true modal effect for RadNotification


The modal overlay used in a web page is actually an HTML element that has some specific properties set - absolute positioning, appropriate size, backgroung color, opacity and the unselectable attribute set to on. In this case we need to utilize the RadNotification's client-side events and more precisely the OnClientShowing and OnClientHidden to respectively show and hide the modality div. Below is an example how to create such an element:

if (!modalDiv)
{
    modalDiv = document.createElement("div");
    modalDiv.style.width = "100%";
    modalDiv.style.height = "100%";
    modalDiv.style.backgroundColor = "#aaaaaa";
    modalDiv.style.position = "absolute";
    modalDiv.style.left = "0px";
    modalDiv.style.top = "0px";
    modalDiv.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)";
    modalDiv.style.opacity = ".5";
    modalDiv.style.MozOpacity = ".5";
    modalDiv.setAttribute("unselectable", "on");
    modalDiv.style.zIndex = (sender.get_zIndex() - 1).toString();
    document.body.appendChild(modalDiv);
}

A simple, runnable page that shows the approach in action is attached.

Files

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.