Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Lightbox Effect For Login Page in asp.net

Aug 11, 2010
Introduction

Here I will explain how to create lightbox effect for Login Page in asp.net

Description:

One day I got requirement like showing login page with popup window at that time I used lightbox effect for my login page to display in popup window.

To display login page with lightbox effect First we need to desgin Login Page like this
 
<html>
<head>
<title>LIGHTBOX EXAMPLE</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 #a6c25c;
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 #a6c25c;
width:135px;
}
.button2
{
 background-color:#a6c25c;
 color:White;
 font-size:11px;
 font-weight:bold;
 border:1px solid #7f9db9;
 width:68px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click Here</a>
<div id="light" class="white_content">
 <table cellpadding=0 cellspacing=0 border=0 style="background-color:#a6c25c;" 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="close.gif" style="border :0px"  width="13px" align="right" height="13px"/></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>&nbsp;</td></tr>
<tr><td align="center">
<table><tr>
<td align="right">Username:</td><td><asp:TextBox ID="txtUser" runat="server" CssClass="textfield"></asp:TextBox>
</td>
</tr>
<tr><td height="10px"></td></tr>
<tr>
<td align="right">Password:</td>
<td><asp:TextBox ID="txtPwd" runat="server" CssClass="textfield"></asp:TextBox></td>
</tr>
<tr><td height="10px"></td></tr>
<tr>
<td> </td><td><asp:Button ID="Button1" runat="server" Text="Sign In" class="button2"/>
<asp:Button ID="Button2" runat="server" Text="Sign Up" class="button2" /></td>
</tr></table></td></tr>
<tr><td height="10px"></td></tr>
</table>
</td></tr>
</table>
<div align="center" class=" headertext">
<asp:Label ID="txtlbl" runat="server"  ></asp:Label></div>
</div>
<div id="fade" class="black_overlay"></div>
</form>
</body>
</html>

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 RSS subscribe by email Subscribe by Email

27 comments :

Anonymous said...

hi it would be nice to know how i can have my gallery of images in a lightbox. here is my site ido-wedding.co

Anonymous said...

it is working fine both in mozilla,opera and google chrome also but it is not working in ie

Suresh Dasari said...

hi i tested application in all browsers it's working fine even in IE6 also it's working fine..........

parashu said...

hi .. thank you so much .. its too good.
Parshu

Unknown said...

instead of trying to set opacity with CSS, use jquery:

$(".black_overlay").fadeTo('fast', 0.6);

and set opacity that way, it's way slicker and works on all browsers.

Balaji said...

Can u help me? Need a LoginPage like Justdial.com(Which we click linkbutton it shoud popup) So please help this in vb.net dude? mail me balajivpbs@gmail.com

adi said...

can you help me plz hw can i sign in and hw can i sign up.... plz tel me
adi.narayana14gmail.com

naresh said...

Hi.suresh...ur doing superb job..thanks alot buddy..:)

Anonymous said...

How to display That Login Form when Click A Button?..

Anonymous said...

Thanks Suresh

Nishok said...

can u help me please its urgent i need code for, when i click forgotpassword in login page(webusercontrol) i need to show popup to get the email address of user and send them random password to their mailid? send me code to seanishok@yahoo.com

Harender Singh Negi said...

hi suresh its working fine but when i inserted wrong id and password i can be redirect on page. it can not display msg on login window. so please give me solution of this as soon as possible thank u

RamMohan said...

how to access signin and signup button click event on aspx.cs page to validate usernmae and password.i m confused how to get texbox values in aspx.cs page

DHAYA said...

Thanx a Lot Suresh UR Article where help me a

LOT

Dhayalan
From MUMBAI

mounica said...

hai sir...liked ur post....bt when the password r username is wrong i need a message to be printed that wrong pass on the same lightbox login

Anonymous said...

when i am clicking on the button the window disappears,but my requirement is that it should not disappear untill or unless i click the close buttuon(or image)..plz help

Anonymous said...

suppose that i want to attach a gridview with this window which shows the details of login(just for knowledge)then...
i have binded gridview and the details are coming when i click a button like show details(i made it)the window disappears and to see the details i have to click once more Login here hyperlink text..but ..which i dont want..
the window shouldnot disaapear after clicking on the button

Suman Raj said...

so nice to implement

Unknown said...
This comment has been removed by the author.
Anonymous said...

hello can u tell me what files will to be install for.net and how to launch aspx files plz tell and give links to install

Unknown said...

Thank you very much realy working good

Unknown said...

Could you please explain how to write code to the Sign In button

Anonymous said...

how to display direct login page without click here

Anonymous said...

black overlay comes before my registration page. when i click the anchor tag it goes to he registration page.

Anonymous said...

date picker control is not working. when i show my registration form inside the div id="light" class="white_content". please give me solution.

Anonymous said...

Comment should not be empty

Mano_Deep said...

Thank you!! thank you very much

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.