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" %>

<title>Use Dragpanel for Login Page</title>

.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>

<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">

<asp:Panel ID="pnldrag" runat="server">

<img src="close.gif" align="right" style="cursor:pointer" alt="Close" onclick="ClosePopup()"/>Enter Login Details</td>

</tr>

<tr>

<td>

<tr>

<asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td align="right">Password:</td>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<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>

<td align="left">Remember User ID</td>

</tr>

</table>

</td>

</tr>

</table>

</asp:Panel>

</div>

</asp:Panel>

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>