This is the example of moveable panel using AJAX. After clicking login button
one login screen will come and you can place the panel any where in your page. Open a AJAX enable ASP.Net page and paste the below code.
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="change_location.aspx.cs"
Inherits="change_location"
%>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajax"
%>
<!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>Untitled 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">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<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:Black">
<img src="cross.jpg"
align="right"
style="cursor:pointer"
alt="Close"
onclick="ClosePopup()"/>
Enter Login Details</td>
</tr>
<tr>
<td>
<table width="100%"
border="0"
align="center"
style="">
<!-- login id -->
<tr>
<td align="right">User
ID:</td>
<td align="left">
<asp:TextBox ID="txtUsername" runat="server" OnTextChanged="txtUsername_TextChanged"></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>
</div>
</form>
</body>
</html>
its not working proper
ReplyDeletes........its not working... waste of time..
ReplyDeleteit is work very well, thanks
ReplyDelete