In this article I will show you how you can create lightbox effect
for login page in asp.net. In this login form appear separately in the browser. in this i have used asp.net, javascript and css for lightbox effect. With the help of this article you will be able to cover following topics lightbox effect for login page in asp net or Lightbox Effect For Login Page in asp.net or Call asp.net Page in LightBox or Adding the Light Box Effect in ASP.NET using JQuery.
In my previous article I have show you that how you can
create a Simple
Login Form In Asp.Net Using C#.Net and VB.Net.
Some of my previous article are as follows: Highlight
GridView Row on Mouseover Using CSS in Asp.Net C#.Net, Allow
Only Alphabets in TextBox Using Javascript in Asp.Net, Restrict
Number of Characters to be Entered in the TextArea Using jQuery in Asp.Net MVC,
How
to Create and Read Cookies In ASP.NET Using C#, Multiple
File Upload With Asp.Net MVC C# and HTML5 | How to upload files to ASP.NET MVC
application.
So here is the code for this article
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LightBoxLogin.aspx.cs"
Inherits="ProjectDemo_Asp.et.LightBoxLogin" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Login
Form With LightbBox Effect in Asp.Net</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:
30%;
height:
140px;
padding:
4px;
border:
3px solid orange;
background-color:
white;
z-index:
1002;
overflow:
auto;
}
</style>
<script language="javascript">
function
UserLoginOpen() {
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
function
UserLoginClose() {
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';
return
false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align:center;padding-top:20%;">
<a href="#" onclick="javascript:UserLoginOpen();">Click
To Login</a>
</div>
<div id="fade" class="black_overlay">
</div>
<div id="light" class="white_content">
<table width="100%" cellpadding="5" cellspacing="5" border="1" style="border:1 solid black;border-collapse:collapse;">
<tr>
<td colspan="2" style="background-color:Gray;color:White;"><b>Login Form</b></td>
</tr>
<tr>
<td align="right">User Id:</td>
<td> <asp:TextBox ID="txtuserid"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td align="right">Password :</td>
<td> <asp:TextBox ID="txtpassword"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td align="center" colspan="2"><asp:Button ID="btnlogin"
runat="server"
Text="Login" onclick="btnlogin_Click" />
<asp:Button ID="btnclose" runat="server" Text="Close"
OnClientClick="javascript:return
UserLoginClose();"/>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
In above code the style sheet is used for light box effect.
About the Author
0 comments:
Please let me know your view