Window

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Window - Modal Popup

Set RadWindow's properties










The Modal Popup feature of RadWindow creates a semi-transparend background behind the popup that hides the rest of the page so that the user cannot interact with the page until the modal dialog is closed.

The main features our ASP.NET modal window has are:

  • the modal background resizes with the browser
  • the modal dialog is centered by default
  • the CenterIfModal property can make it respect the Top and Left properties with regard to an OffsetElement, if one is set
  • the modality can also be toggled through the client-side API of the control during runtime, not only with the server Modal property
  • focusable controls on the main page cannot be tabbed into when a modal dialog is opened - their tabIndex is set to -1 and restored when the dialog is closed
  • the predefined dialogs (RadAlert, RadConfirm and RadPrompt) are always modal to mimic the behaviour of the original browser dialog boxes
C# VB
Show code in new window Demo isolation steps
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Window.ModalPopup.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Modal PopUp Window | RadWindow Demo</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <telerik:RadAjaxLoadingPanel runat="server" ID="ralpConfiguration">
     </telerik:RadAjaxLoadingPanel>
     <telerik:RadAjaxPanel runat="server" ID="rapConfiguration" LoadingPanelID="ralpConfiguration">
          <telerik:RadWindow ID="modalPopup" runat="server" Width="360px" Height="360px" Modal="true">
               <ContentTemplate>
                    <div style="padding: 10px; text-align: center;">
                         <telerik:RadButton ID="rbToggleModality" Text="Toggle modality" OnClientClicked="togglePopupModality"
                              AutoPostBack="false" runat="server" Height="65px" />
                    </div>
                    <p style="text-align: center;">
                         RadWindow is designed with keyboard support in mind - try tabbing
                         before and after removing the modal background. While the popup is modal
                         you cannot focus the textarea, once the modality is removed the textarea will
                         be the first thing to receive focus because it has tabIndex=1.
                    </p>
               </ContentTemplate>
          </telerik:RadWindow>
               <qsf:ConfiguratorPanel runat="server" ID="rwConfigurationPanel" Width="270px" Height="370px"
                    Title="Set RadWindow's properties" Expanded="true">
                    <asp:CheckBox ID="chkBoxIsModal" Text="RadWindow is modal" Checked="true" runat="server" />
                    <br />
                    <br />
                    <asp:CheckBox ID="chkBoxCenterIfModal" Text="RadWindow will center if it is modal" Checked="true" runat="server" />
                    <br />
                    <br />
                    <telerik:RadNumericTextBox runat="server" ID="rntbLeft" Label="Left: " Value="50" MinValue="-2000" MaxValue="2000">
                         <NumberFormat GroupSeparator="" DecimalDigits="0" />
                    </telerik:RadNumericTextBox>
                    <br />
                    <br />
                    <telerik:RadNumericTextBox runat="server" ID="rntbTop" Label="Top: " Value="50" MinValue="-2000" MaxValue="2000">
                         <NumberFormat GroupSeparator="" DecimalDigits="0" />
                    </telerik:RadNumericTextBox>
                    <br />
                    <br />
                    <telerik:RadButton ID="rbSubmitChanges" Text="Make the changes" AutoPostBack="true"
                         runat="server" />
                    <br />
                    <br />
                    <telerik:RadButton ID="rbShowDialog" Text="Show the dialog" runat="server" />
               </qsf:ConfiguratorPanel>
               <textarea tabindex="1" cols="35" rows="5">You cannot type or tab into this textarea while the RadWindow is modal even though its tabIndex is set to 1.</textarea>
     </telerik:RadAjaxPanel>
     <telerik:RadCodeBlock runat="server" ID="rdbScripts">
          <script type="text/javascript">
               function togglePopupModality()
               {
                    var wnd = $find("<%=modalPopup.ClientID %>");
                    wnd.set_modal(!wnd.get_modal());
                    if (!wnd.get_modal()) document.documentElement.focus();
               }
               function showDialogInitially()
               {
                    var wnd = $find("<%=modalPopup.ClientID %>");
                    wnd.show();
                    Sys.Application.remove_load(showDialogInitially);
               }
               Sys.Application.add_load(showDialogInitially);
          </script>
     </telerik:RadCodeBlock>
    </form>
</body>
</html>