Window - Modal Popup

Demo Configurator

Isolate this demo as a stand-alone application

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
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Window.ModalPopup.DefaultCS" %>

<!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 Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script src="scripts.js" type="text/javascript"></script>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rbSubmitChanges">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="modalPopup" />
                    <telerik:AjaxUpdatedControl ControlID="loadingPanelWrapper" LoadingPanelID="ralpConfiguration" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container no-bg">
        <textarea tabindex="1" cols="35" rows="5">You cannot type or tab into this text area while the RadWindow is modal even though its tabIndex is set to 1.</textarea>
    </div>
    <telerik:RadWindow ID="modalPopup" runat="server" Width="360px" Height="360px" Modal="true" OffsetElementID="main">
        <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 text area, once the modality is removed the text area will
                    be the first thing to receive focus because it has tabIndex=1.
            </p>
        </ContentTemplate>
    </telerik:RadWindow>
    <telerik:RadCodeBlock runat="server" ID="rdbScripts">
        <script type="text/javascript">
            $modalWindowDemo.modalWindowID = "<%=modalPopup.ClientID %>";
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxLoadingPanel runat="server" ID="ralpConfiguration"></telerik:RadAjaxLoadingPanel>
    <asp:Panel runat="server" ID="loadingPanelWrapper">
        <qsf:ConfiguratorPanel runat="server" ID="rwConfigurationPanel">
            <Views>
                <qsf:View>
                    <qsf:ConfiguratorColumn runat="server">
                        <ul class="fb-group">
                            <li>
                                <asp:CheckBox ID="chkBoxIsModal" Text="RadWindow is modal" Checked="true" runat="server" />
                            </li>
                            <li>
                                <asp:CheckBox ID="chkBoxCenterIfModal" Text="RadWindow will center if it is modal" Checked="true" runat="server" />
                            </li>
                            <li>
                                <qsf:NumericTextBox runat="server" ID="rntbLeft" Label="Left " Size="Narrow" Value="50" MinValue="-2000" MaxValue="2000">
                                    <NumberFormat GroupSeparator="" DecimalDigits="0" />
                                </qsf:NumericTextBox>
                                <qsf:NumericTextBox runat="server" ID="rntbTop" Label="Top" Value="50" Size="Narrow" MinValue="-2000" MaxValue="2000">
                                    <NumberFormat GroupSeparator="" DecimalDigits="0" />
                                </qsf:NumericTextBox>
                            </li>
                            <li>
                                <qsf:Button ID="rbSubmitChanges" Text="Apply changes" AutoPostBack="true" runat="server" />
                                <qsf:Button ID="rbShowDialog" Text="Show dialog" runat="server" />
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
    </asp:Panel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?