<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Window.ModalPopup.DefaultCS" %>
<!DOCTYPE html>
<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" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="scripts.js" type="text/javascript"></script>
<link href="styles.css" rel="stylesheet" />
<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>
<telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="Textarea" />
<div class="demo-container size-custom">
<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 RenderMode="Lightweight" ID="modalPopup" runat="server" Width="360px" Height="365px" Modal="true" OffsetElementID="main" OnClientShow="setCustomPosition" Style="z-index: 100001;">
<ContentTemplate>
<div style="padding: 10px; text-align: center;">
<telerik:RadButton RenderMode="Lightweight" 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>