LightBox Effect In ASP.NET Using CSS & Javascript

In this article i will show you how you can create a login form with lightbox effect by using css and javascript. So for this first yo needed to create a asp.net application. In this i have added css style for adding light box effect and javascript to show and hide the div, which is used for showing the effect.


Now add the below style sheet in header of your page.

<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 black;
width: 135px;
}.buttonclass
{background-color: blue;
color: White;
font-size: 11px;
font-weight: bold;
border: 1px solid #7f9db9;
width: 68px;
}</style>

In this style sheet black over lay and white content is the style is the css which will put the light box effect.

Now Add the controls on your page to prepare the login form.

<a href="javascript:void(0)" onclick="javascript:DisplayBox();">Click here to display lightbox effect</a>
<div id="boxdiv" class="white_content">
<table cellpadding="0" cellspacing="0" border="0" style="background-color: Yellow;"
width="100%">
<tr>
<td height="16px">

</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"
<div id="Div1" class="white_content">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: Yellow;"
width="100%">
<tr>
<td height="16px">
</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" class="headertext" colspan="2">
Login Form</td>
</tr>
<tr>
<td>
 
</td>
</tr>
<tr>
<td align="center">
<table>
<tr>
<td align="right">
Username:</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" CssClass="textfield"></asp:TextBox>
<%----%>
</td>
</tr>
<tr>
<td height="10px">
</td>
</tr>
<tr>
<td align="right">
Password:</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" CssClass="textfield"></asp:TextBox><%----%>
</td>
</tr>
<tr>
<td height="10px">
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="Button1" runat="server" class="buttonclass" Text="Login" />
<input class="buttonclass" onclick="javascript:CloseBox();" type="button"value="Close" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10px">
</td>
</tr>
</table>
</td>
</tr>
</table>
<div align="center" class=" headertext">
<asp:Label ID="Label1" runat="server"></asp:Label></div>
</div>
<div id="Div2" class="black_overlay">
</div> 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="btnlogin" runat="server" Text="Login" class="buttonclass" />
<input type="button" value="Close" onclick="javascript:CloseBox();"class="buttonclass" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10px">
</td>
</tr>
</table>
</td>
</tr>
</table>
<div align="center" class=" headertext">
<asp:Label ID="lblmessage" runat="server"></asp:Label></div>
</div>
<div id="outerdiv" class="black_overlay">
</div>

Now add the below javascript in the header of your page.

<script language="javascript">
function DisplayBox() {
document.getElementById(`boxdiv`).style.display = `block`;
document.getElementById(`outerdiv`).style.display = `block`;
}function CloseBox() {
document.getElementById(`boxdiv`).style.display = `none`;
document.getElementById(`outerdiv`).style.display = `none`;
}</script>

In above javascript code display box is used for displaying the box and close box is used for hiding the box.

Now run the page and you will get the output.




Now click on link



As you click on close button box will get disappear.

Tags: Asp.Net , CSS/CSS3 , Javascript