6 months ago , While working on a project I tried hard to
integrate a login pop-up windows at the page load .I want that to be appear
while someone open the website first time .I posted my this question to many forums got many replies but not a single reply was
total helpful for me nor only 40 %.
I was trying hard sometime pop-up got created but event was
not working when I create any asp.net control there, so I got my points what I
need to get resolved, If we talk here about php or html5 it ll work fine and this
is a work of only 10 minutes but that time this work was big deal for me , I cannot forget how I was
searching for this. The main point was that I was never worked for this kind of
stuff, so there were many short or miner points for me to be clear.
Now, I also can say
this , it is the work of maximum 10 or 15 mins for me now J
Now the project has been completed and I am explaining this
to everyone who is facing this issue, may be it ll help
First of all to create a design write below source code:
- Add css :
<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 #CC9933 ;
background-color: white;
z-index:1002;
overflow: auto;
}
.headertext
{
font-family:verdena, Helvetica, sans-serif;
font-size:14px;
color:#f19a19;
font-weight:bold;
}
.textfield
{
border:1px solid #CC9933 ;
width:135px;
}
.button2
{
background-color: #CC9933 ;
color:White;
font-size:11px;
font-weight:bold;
border:1px solid #7f9db9;
width:68px;
}
</style>
2.
Write html code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Pop-up on page load</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 #CC9933 ;
background-color: white;
z-index:1002;
overflow: auto;
}
.headertext
{
font-family:verdena, Helvetica, sans-serif;
font-size:14px;
color:#f19a19;
font-weight:bold;
}
.textfield
{
border:1px solid #CC9933 ;
width:135px;
}
.button2
{
background-color: #CC9933 ;
color:White;
font-size:11px;
font-weight:bold;
border:1px solid #7f9db9;
width:68px;
}
</style>
</head>
<body onload="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<form id="form1" runat="server">
<div>
<div id="light" class="white_content">
<table cellpadding=0 cellspacing=0 border=0 style="background-color:#BCBCBC; font-family: Verdana, Geneva, Tahoma, sans-serif;" 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/close-icon.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 here </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="User ID Required"
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>
<%--new <tr>--%>
<tr>
<td align="right">
</td>
<td>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<%--<asp:Button ID="Button2"
runat="server" Text="Sign In" class="button2"
OnClick="Button1_Click" />--%>
<tr><td height="10px"></td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="_txtPassword" ErrorMessage="Password Required"
ValidationGroup="a" CssClass="content3"></asp:RequiredFieldValidator>
</td></tr>
<tr>
<td> </td><td><asp:Button ID="_btnLogin" runat="server" onclick="_btnLogin_Click" CssClass="button2" Text="Login" ValidationGroup="a" />
</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>
3.Now add the below code at the button click event
to know button click is working or not :
protected void _btnLogin_Click(object sender, EventArgs e)
{
Response.Redirect("next page name");
}
Instruction:
To open this pop-up on page load I write
below code on the body page load like below :
<body onload="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
</body>
4.Now,
save the whole page and run the page on browser It ll open like below image:
Thanks
