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> </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 Email
|
|||
27 comments :
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
it is working fine both in mozilla,opera and google chrome also but it is not working in ie
hi i tested application in all browsers it's working fine even in IE6 also it's working fine..........
hi .. thank you so much .. its too good.
Parshu
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.
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
can you help me plz hw can i sign in and hw can i sign up.... plz tel me
adi.narayana14gmail.com
Hi.suresh...ur doing superb job..thanks alot buddy..:)
How to display That Login Form when Click A Button?..
Thanks Suresh
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
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
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
Thanx a Lot Suresh UR Article where help me a
LOT
Dhayalan
From MUMBAI
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
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
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
so nice to implement
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
Thank you very much realy working good
Could you please explain how to write code to the Sign In button
how to display direct login page without click here
black overlay comes before my registration page. when i click the anchor tag it goes to he registration page.
date picker control is not working. when i show my registration form inside the div id="light" class="white_content". please give me solution.
Comment should not be empty
Thank you!! thank you very much
Note: Only a member of this blog may post a comment.