New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

How to make a modal RadNotification


Make the RadNotification display a modal overlay.


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


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 notification/client-side-programming/events/overview 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"); = "100%"; = "100%"; = "#aaaaaa"; = "absolute"; = "0px"; = "0px"; = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)"; = ".5"; = ".5";
    modalDiv.setAttribute("unselectable", "on"); = (sender.get_zIndex() - 1).toString();

A runnable page that shows the approach in action is attached here:

In this article