2 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 45 %.
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>
<bodyonload="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 :
<bodyonload="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:
I am a passionate programmer and a Software Engineer love blogging and developing applications in Microsoft Technologies.
ConversionConversion EmoticonEmoticon