Twitter like Login Box with Jquery & CSS

11

This tutorial shows a smarter way of dispalying login box in your web application. It is just similar to Twitter login box. The script is absolutely simple and easy to understand.
So enjoy the live demo…



Live Demo Download Script

HTML & Jquery Code



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 $(".login_btn").click(function()
 {
  $("#login_box").show();
  return false;
 });
 $("body #main").click(function()
 {
  $("#login_box").hide();
  return false;
 });
});
</script>
<body>
<div class="heading">Twitter Like Login Box with Jquery.</div>
<div id="login_btn"><a href="#" class="login_btn">Sign In</a></div>
 <div id="login_box">
  <form method="post" action="">
  <label>UserName<input type="text" name="user"/></label>
  <label>Password<input type='password' name="pass"/></label>
  <input type="submit" value=" Sing In " class="login_btn"/>
  </form>
 </div>
<div id='main'><h1><a href="www.webspeaks.in">webspeaks.in</a></h1></div>
</body>

CSS Code

#login_btn
{
margin-left:300px;
text-align:right;
width:500px;
background-color:#50D0DE;
border:1px solid #0D716F;
}
#login_box
{
width:170px;
font-family:Tahoma;
font-size:12px;
color:#0E7268;
background-color:#B3ECE4;
border:solid 2px #5ea0c1;
padding:8px;
margin-left:600px;
position:absolute;
display:none;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
.login_btn
{
background-color:#FFFFFF;
border:solid 1px #5ea0c1;
padding:3px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
#main
{
padding-left:500px;
width:100%;
height:500px;
}
.heading{
background-color:#2859AA;
border:1px solid #121649;
color:#FFFFFF;
font-weight:bold;
font-size:14px;
padding:3px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:500px;
margin-left:300px;
}

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

11 thoughts on “Twitter like Login Box with Jquery & CSS”

  7. My spouse and I absolutely love ypur blog and find almost all of your post's to be
    exactly what I'm looking for. Would you offer guest writers to
    write content for you personally? I wouldn't mind producing a post or elaborating oon some of the subjects you write about here.
    Again, awesome web site!

  9. Every weekend i used to ppay a visit this website, as i wish
    for enjoyment, for the reason that this this website conations truly ice funnmy information too.

Comments are closed.