In this am going to explain the Popup login in Asp.net using Div and CSS.
Open Visual studio 2010 or 2008 and create a new website and create new webpage say Popuplogin.aspx. Paste the following html code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>PopUpLoginexample</title>
<style type="text/css">
.black_overlay {
display:none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content
{
display:none;
position: absolute;
top: 25%;
left: 35%;
width: 35%;
padding: 0px;
border: 0px solid #CC9933 ;
background-color: white;
z-index:1002;
overflow: auto;
}
.headertext
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#f19a19;
font-weight:bold;
}
.textfield
{
border:1px solid #CC9933 ;
width:135px;
}
.button2
{
background-color: #CC9933 ;
color:White;
font-size:11px;
font-weight:bold;
border:1px solid #7f9db9;
width:68px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href = "javascript:void(0)" class="toplink" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Login</a>
<div id="light" class="white_content">
<table cellpadding=0 cellspacing=0 border=0 style="background-color:#CC9933 ;" width="100%"><tr><td height="16px"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
<img src="images/close-icon.png"
style="border-style: none; border-color: inherit; border-width: 0px; height: 17px; width: 16px;"
align="right"/></a></td></tr>
<tr><td style="padding-left:16px;padding-right:16px;padding-bottom:16px">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="background-color:#fff" width="100%">
<tr>
<td align="center" colspan="2" class="headertext" >Login Form </td>
</tr><tr><td> </td></tr>
<tr><td align="center">
<table>
<tr>
<td align="right" class="bot_text">Username:</td>
<td><asp:TextBox ID="_txtUserid" runat="server"></asp:TextBox></td>
</tr><tr><td height="10px"></td><td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="_txtUserid" ErrorMessage="User ID Required"
ValidationGroup="a" CssClass="content3"></asp:RequiredFieldValidator>
</td></tr>
<tr><td align="right" class="bot_text">Password:</td>
<td><asp:TextBox ID="_txtPassword" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr><td height="10px"></td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="_txtPassword" ErrorMessage="Password Required"
ValidationGroup="a" CssClass="content3"></asp:RequiredFieldValidator>
</td></tr>
<tr>
<td> </td><td><asp:Button ID="_btnLogin" runat="server" onclick="_btnLogin_Click" CssClass="button2" Text="Login" ValidationGroup="a" />
</td>
</tr></table></td></tr>
<tr><td height="10px"></td></tr>
</table>
</td></tr>
</table>
</div>
<div id="fade" class="black_overlay"></div>
</div></form></body></html>
Save the page and run you will see the following output :
Undersatnding the code :
When you debug the code you will see the login link when you click it we are calling internally div with id light using the following code. <a href = "javascript:void(0)" class="toplink" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Login</a>
There div light is a div consists of login form with username and passwords.and required field validators.you can write your own code for validating the username and pass word in the login control click event.
No comments:
Post a Comment