AjaxDragpanelExtender Example or how to show the login page with popup using modalpopupextender or how to use AjaxDragPanelExtender in asp.net


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Use Dragpanel for Login Page</title>
<style type="text/css">
.Dialog {
background: none repeat scroll 0 0 #E5E8D2;
border: 1px solid #466D77;
}
body {
font-family: Verdana,Tahoma,Arial !important;
font-size: 9pt;
}
.TitleBar {
background: url("images/titleBarBg.gif") repeat-x scroll left bottom #FAFAFA;
cursor: move;

}
.Button {
background: #E9E9E9;
border: 1px solid #9B9B9B;
padding: 0.1em;
vertical-align: middle;
}
.modalPopup
{
background-color: #696969;
filter: alpha(opacity=40);
opacity: 0.7;
xindex:-1;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager runat="server" ID="scriptmanager1"></ajax:ToolkitScriptManager>
<ajax:DragPanelExtender ID="dragpnl" runat="server" TargetControlID="pnllogin" DragHandleID="pnldrag"/>
<ajax:ModalPopupExtender ID="modalpopup1" runat="server" BackgroundCssClass="modalPopup" TargetControlID="btnshow" PopupControlID="pnllogin"/>
<asp:Button ID="btnshow" runat="server" Text="Show Login" />
<asp:Panel ID="pnllogin" runat="server">
<div style="width: 400px">
<asp:Panel ID="pnldrag" runat="server">
<table class="Dialog" width="100%">
<tr style= " background-image:url(bg_filter_header.gif)" class="TitleBar">
<td style="color:white">
<img src="close.gif" align="right" style="cursor:pointer" alt="Close" onclick="ClosePopup()"/>Enter Login Details</td>
</tr>
<tr>
<td>
<table width="100%" border="0px" align="center" style="">
<!-- login id -->
<tr>
<td align="right">User ID:</td>
<td align="left">
<asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
</td>
</tr>
<!-- password -->
<tr>
<td align="right">Password:</td>
<td align="left">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnsubmit" runat="server" Text="Submit" CssClass="Button" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="Button"  />
</td>                             
</tr>
<tr>
<td align="right">
<input type="checkbox" />
</td>
<td align="left">Remember User ID</td>                             
</tr>
</table>
</td>
</tr>
</table>
</asp:Panel>
</div>
</asp:Panel>
<script type="text/javascript">
function setBodyContentHeight() {
//Setting height of body to maintain position of drag panel
document.body.style.height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight) + "px";
}
setBodyContentHeight();
function ClosePopup() {
//Hide the modal popup - the update progress
var popup = $find('<%= modalpopup1.ClientID %>');
if (popup != null) {
popup.hide();
}
}
</script> 
</form>
</body>
</html>