Introduction:
Here I will explain how to show the login page with modal popup and how to use Ajax dragpanelextender using asp.net
Description:
I saw one website that contains login button if I click on that login button login page opens with popup and we can drag and drop that login panel anywhere on that popup for looking it’s very nice at that time I decided to write post to implement login page with popup and draggable. Previosuly I explained clearly lightbox effect for login page. In that post we can show our login page with popup. Now we can see how to show login page with popup and dragble on modalpopup to implement this I am using AjaxModalPopupExtender and AjaxDragPanelExtender . i already explained clearly about how to show the progressbar during postback using AjaxModalPopupExtender. Now I will explain about AjaxDragpanelExtender.
AjaxDragPanelExtender: The dragpanelextender is used to move the asp.net panel control anywhere on the webpage and it allows users to add dragability to their controls easily. The draPanelextender contains two properties those are
TargetControlID - The ID of a Panel to make draggable.
DragHandleID - The ID of a control that will serve as the "drag handle" for the panel. When the user clicks and drags this control, the panel will move.
AjaxDraPanelExtender targets two panels first panel as a container (i.e. TargetControlID) and second panel as draghandler that will allow user to drag the control over the webpage.
Now create one new web application and add AjaxControlToolkit.dll to your bin folder and design your aspx page like this
<%@ 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>
|
If you observe above code I designed page for login panel and used modalpopupextender to show popup and used dragpanelextender to drag the login panel anywhere on web page. In code I written one JavaScript function also why I have written this JavaScript function is there any specific reason to write this JavaScript function? Yes it is there first remove JavaScript function and run your application after that drag and drop the panel to somewhere on the web page and see is that dragpanel staying in the place wherever you drop? No it will retain to its original position for that reason to maintain the position of drag panel wherever we drop we need write this JavaScript function just before the end of body tag.
Demo
 |
Download sample code attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
6 comments :
Do you have samples of Ajax Control Toolkit DragPanel Visual Studio 2010, but in visual Basic? Alex...
@Alex.....
The code whatever I written in this post useful for both c# and vb check it out........
s
Hi and thank you !
Great Example. The JavaScript setBodyContentHeight() is an really important factor.
Validation (CSS 2.1): 'filter' is not a known CSS property name.
Validation (CSS 2.1): 'opacity' is not a known CSS property name.
Validation (CSS 2.1): 'xindex' is not a known CSS property name.
i'm getting these 3 line error sir....
h
Note: Only a member of this blog may post a comment.