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
Hi Neha,
ReplyDeleteYou have tried well to share your experience but you should design your blog user friendly where end user can check your all blog at once..
I am also a blogger you can refer my blog also..
http://pankajtiwarii.blogspot.in/
Thanks
Pankaj Tiwari
Senior Software Engineer
Samsung Group
Email:- Pankaj.ics@gmail.com
Thanks Pankaj for being so cooperative.
ReplyDeleteI am a developer and I just want to appreciate you regarding this coding which is useful for me while developing.
ReplyDeleteSoftware Development Company
Thx Mike to appreciate and Good Luck!
ReplyDeleteHi,
ReplyDeleteGreat code, many thanks!
Alltough for a noob like me I would be very greatful if you could explain more exactly hov I create the button click event, is it on the same page or on the default page?
I believe the last part is to be added in Default.aspx but I´t won´t help as long as I don´t know how to fix the button click event
Anderson,do you want to open pop-up on button click event??
ReplyDeleteam i right?
Please elaborate me more what do you exactly want?
Thanks for help this coding.....
ReplyDeleteVery nice explanation..Can you please tell that how to be very good in coding..I am also facing the same issues during coding as you have experienced.I know all this comes by experience but my experience is increasing too and I want to get little more perfection in building logics and wtie the code faster.
ReplyDeletePlease help if poss.
Thanks
Coding is an art , and to be good in it, first of all you need to think logically , and second practice makes you best .
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThanks you for helpful. I have a question, if user already login, how to avoid popup window whenever page load?
ReplyDelete