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
No comments:
Post a Comment