ModalPopupExtender provides the functionality of popup without opening the new browser window. ModalPopupExtender works within the same window of web browser that “pops up” on the fixed content of a page. ModalPopup extender control disables the fixed content on the web page, places a layer on it and displays a new web form with other interactive controls to get the user input.
Example Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModelPopup.aspx.cs" Inherits="ModelPopup" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax Control - Modal Popup Extender</title>
<style type="text/css">
.LoginBackground
{
background-color: #000;
filter: alpha(opacity=70);
opacity: 0.7;
}
.LoginPopup
{
background-color: #FFFFFF;
border: 5px solid #ABA9AA;
padding: 0 0 15px;
width: 310px;
height: 200px;
margin: 0;
}
.LoginPopup table
{
padding: 10px;
}
.login_header
{
background: #ABA9AA;
padding: 4px 6px;
font-size: large;
margin: 0 0 10px 0;
}
.hl_login
{
color: #000;
text-decoration: underline;
font-size: large;
padding: 3px 5px;
border: 1px solid #D7D7D7;
background-color: whiteSmoke;
cursor: pointer;
}
.btnLogin
{
font-size: 14px;
border: 1px solid #DDDCDC;
color: white;
cursor: pointer;
line-height: 1em;
text-transform: uppercase;
background: #42B6C9;
padding: 6px 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:LinkButton ID="linkbutton_login" runat="server">LinkButton</asp:LinkButton>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="panel_login" runat="server" CssClass="LoginPopup">
<asp:UpdatePanel ID="updatepanel_login" runat="server">
<ContentTemplate>
<h2 class="login_header">
Log In to Submit Review</h2>
<table>
<tr>
<td>
<asp:Label ID="lbl_username" runat="server" Text="Username/Email"></asp:Label>
</td>
<td>
<asp:TextBox ID="txt_username" runat="server" Height="30px" Width="150px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lbl_password" runat="server" Text="Password"></asp:Label>
</td>
<td>
<asp:TextBox ID="txt_password" runat="server" Height="30px" Width="150px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
Remember Me
<asp:CheckBox ID="chkRememberMe" runat="server" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btn_popup_quick_login" runat="server" Text="Log In" CssClass="Clicked"
/>
<asp:Button ID="btn_Cancel" runat="server" Text="Cancel" CssClass="btnLogin" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<cc1:ModalPopupExtender runat="server" TargetControlID="linkbutton_login"
PopupControlID="panel_login" BackgroundCssClass="LoginBackground" CancelControlID="btn_Cancel">
</cc1:ModalPopupExtender>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment