How to pop up login page in asp.net c# using CSS and java script
In this article, we pop up the login page (div) on
the click of log In (hyperlink). Normally we use this type of code for login
window or contact form. In this article I have use the asp.net controls and validate
with also of server side validator. I have also use the external css to bind
this code.
Design:-
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 #CC9933;
background-color:
white;
z-index:
1002;
overflow:
auto;
}
.headertext
{
font-family:
Arial, Helvetica,
sans-serif;
font-size:
18px;
color:
#Bgfhgf;
font-weight:
bold;
}
.textfield
{
border:
1px solid #CC9933;
width:
135px;
}
.buttonsubmit
{
background-color:
#e3bfc3;
color:
White;
font-size:
11px;
font-weight:
bold;
border:
1px solid #7f9db9;
width:
68px;
}
Note: - you can also create the style sheet with the
name of loginpage in the project or also use the internal css.
Source
code:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="loginpage.aspx.cs" Inherits="loginpage"
%>
<!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 id="Head1" runat="server">
<title>Popup
Login page</title>
<link href="CSS/loginpage.css" rel="stylesheet"
type="text/css"
/>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="javascript:void(0)" class="toplink"
onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
Log In</a>
<div id="light" class="white_content">
<table cellpadding="0" cellspacing="0" border="0" style="background-color: #90bab7;"
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="images/quit.png"
style="border-style: none; border-color: inherit; border-width: 0px;
height:
17px; width: 16px;"
align="right"
/></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" class="bot_text">
Username:
</td>
<td>
<asp:TextBox ID="_txtUserid"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td height="10px">
</td>
<td>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server"
ControlToValidate="_txtUserid"
ErrorMessage="Please
enter your username" ValidationGroup="a" CssClass="content3"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right"
class="bot_text">
Password:
</td>
<td>
<asp:TextBox ID="_txtPassword"
runat="server"
TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td height="10px">
</td>
<td>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator2"
runat="server"
ControlToValidate="_txtPassword"
ErrorMessage="Please
enter your password" ValidationGroup="a" CssClass="content3"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="_btnLogin"
runat="server"
CssClass="buttonsubmit"
Text="Login"
ValidationGroup="a"
OnClick="_btnLogin_Click"
/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="fade" class="black_overlay">
</div>
</div>
</form>
</body>
</html>
Code Behind (c#):-
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
public partial class loginpage : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
}
protected void _btnLogin_Click(object
sender, EventArgs e)
{
if
(_txtUserid.Text == "neerajcode"
&& _txtPassword.Text == "123456789")
{
Response.Redirect("https://www.facebook.com/codesol");
}
else
{
string
message = "Please enter correct email id
/password";
ClientScript.RegisterStartupScript(GetType(), "alert",
"alert('" + message + "');", true);
}
}
}
Out Put:-
How to pop up login page in asp.net c# using CSS and java script
Reviewed by NEERAJ SRIVASTAVA
on
8:18:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
8:18:00 PM
Rating:
ReplyDeleteFirst is to thank you for all this informative posts you give us for free; i bet all of us are happy.
Such a great idea of yours! You have been a big help for me. Thanks a lot. more post for interesting topic. Great!
SAP training in Chennai
i want to display popup window but its showing error on-click null property
ReplyDeleteHere is my code..will u help