Create a true modal effect for RadNotification

Environment

Product
RadNotification

Description

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

However, With the power of JavaScript/jQuery a Modal effect can be implemented additionally. In the Solution section below you will find an example showing how to create that.

You can also check out and older version of such implementation at How to make a modal RadNotification

Solution

The RadWindow's modality is iterating all the elements and is setting the tab index to -1 so they are not selectable while open, and restores the original tab-index when closed.

To do that, use the OnClientShown and OnClientHiding events.

Optional: Set the EnableAriaSupport to True to enable WAI-ARIA Support and make it compatible with Screenreaders.

<asp:Button ID="Button1" Text="show the RadNotification" OnClientClick="showNotification(); return false;" runat="server" />

<telerik:RadNotification runat="server" ID="RadNotification1" EnableAriaSupport="true" Position="Center" AutoCloseDelay="10000" Width="200px" Height="120px" Title="Sample Title"
    Text="Lorem ipsum dolor sit amet" OnClientShown="showModalDiv" OnClientHiding="hideModalDiv">
</telerik:RadNotification>

<input type="text" name="name" value="" />

JavaScript logic

<script type="text/javascript">
    var modalDiv = null;
    function showNotification() {
        $find("<%=RadNotification1.ClientID %>").show();
    }

    setTimeout(showNotification,4000);

    function showModalDiv(sender, args) {
        var popUp = sender.get_popupElement();
        if (!popUp._modalExtender) {
            popUp._modalExtender = new Telerik.Web.UI.ModalExtender(popUp, {
                enableAriaSupport: true,
                getNodesToHide: function () {
                    return $telerik.$(popUp).nextAll(":not(script,link)").get();
                },
                trapTabKey: true
            });
        }
        popUp._modalExtender.show();

        // find the desired element inside the popup and focus it here...
    }

    function hideModalDiv(sender, args) {
        var popUp = sender.get_popupElement();
        popUp._modalExtender.hide();
    }
</script>