i




 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
ASP.NET Popup Login Control using Style sheet and DIV
01-12-2012, 01:29 PM
Post: #1
Thumbs Up ASP.NET Popup Login Control using Style sheet and DIV
This is my Article. is there any mistake please forgive me. As i have seen that most people ask for Popup Login control in ASP.NET to achieve this, their are number of ways but simplest method is to use DIV and CSS.

First create login control in ASP.NET page inside a DIV tag as below:

Code:
<div id="light" class="white_content">
<table cellpadding=0 cellspacing=0 border=0
style="background-color:#a6c25c;" width="100%"><tr><td
height="16px"><a href = "javascript:void(0)" onclick =
"document.getElementById('light').style.display='none';document.getElementById('f​ade').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 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="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><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>

Then use style as:

Code:
<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

#a6c25c;

background-color: white;

z-index:1002;

overflow:

auto;

}

.headertext

{

font-family:Arial, Helvetica,

sans-serif;

font-size:14px;

color:#f19a19;

font-weight:bold;

}

.textfield

{

border:1px

solid

#a6c25c;

width:135px;

}

.button2

{

background-color:#a6c25c;

color:White;

font-size:11px;

font-weight:bold;

border:1px

solid #7f9db9;

width:68px;

}

</style>

call style sheet on button click as:

Code:
<a href = "javascript:void(0)" class="toplink"

onclick =

"document.getElementById('light').style.display='block';document.getElementById('​fade')



Quote


Possibly Related Threads...
Thread: Author Replies Views: Last Post
  Div round corner css nisar87 1 2,564 01-11-2011 11:46 AM
Last Post: raju



User(s) browsing this thread: 1 Guest(s)