connectseekers.com

Thursday, 19 June 2014

Login Form With LightbBox Effect in Asp.Net

6/19/2014 - By Pranav Singh 0

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.


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" />&nbsp;&nbsp;
       <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

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top