Style Login Light Box coding

This script make on style lightbox using jquery with automatically validate using this script make on simple style box

Copy this script on head tag
  

Download Full Source code click Here

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
   $(document).ready(function() {
   $('a.login-window').click(function() {
 
  //Getting the variable's value from a link 
   var loginBox = $(this).attr('href');
 
   //Fade in the Popup
   $(loginBox).fadeIn(300);
 
   //Set the center alignment padding + border see css style
   var popMargTop = ($(loginBox).height() + 24) / 2; 
   var popMargLeft = ($(loginBox).width() + 24) / 2; 
 
   $(loginBox).css({ 
   'margin-top' : -popMargTop,
   'margin-left' : -popMargLeft
   });
 
   // Add the mask to body
   $('body').append('<div id="mask"></div>');
   $('#mask').fadeIn(300);
 
   return false;
   });
 
   // When clicking on the button close or the mask layer the popup closed
   $('a.close, #mask').live('click', function() { 
   $('#mask , .login-popup').fadeOut(300 , function() {
   $('#mask').remove();  
   }); 
   return false;
   });
   });
 
</script>

copy below css on head tag

<style>
#mask {
 display: none;
 background: #ffffff; 
 position: fixed; left: 0; top: 0; 
 z-index: 10;
 width: 100%; 
 height: 100%;
 opacity: 0.8;
 z-index: 999;
}
.login-popup{
 
 width:400px;
 display:none;
 background: #fdfdfd;
 padding: 10px;
 border: 2px solid #000;
 float: left;
 font-size: 14px;
 position: fixed;
 top: 50%; left: 50%;
 z-index: 99999;
 border-color: #999;
 box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5);
 border-radius:20px;
 -moz-border-radius: 20px; /* Firefox */
 -webkit-border-radius: 20px; /* Safari, Chrome */
}
 
img.btn_close {
 
 float: right; 
 margin: -23px -46px 0 0;
}
 
.search2
{
 border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  width:200px;
  min-height: 25px;
  padding: 4px 20px 4px 8px;
  font-size: 12px;
  -moz-transition: all .2s linear;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}
 
 
form.signin p, form.signin span { 
 color:#630; 
 font-size:12px; 
 line-height:18px;
 font-weight:bold;
 font-family:Verdana, Geneva, sans-serif;
} 
 
</style>

Copy the Source design on body tag copy the below code:
 

Click here login box open <a href="#login-box" class="login-window">Login</a>                                       
<div id="login-box" class="login-popup">
<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
<form method="post" class="signin" name="form" action="" onsubmit="return validate();">
<div align="center">
<p> <h3> User Login</h3></p>
 
 
<fieldset>
    <p> Username    
 
        <input name="name"  class="search2" value="" type="text" required="required" autocomplete="off" ></p>
    <p> </p>
    <p> Password    
 
        <input name="password"  class="search2" type="password" required="required" autocomplete="off" ></p>
      <p> </p> 
     <p align="center">  <input class="submit" type="submit" value="send" name="submit"/> </p>
       <p></p>               
</fieldset>
</div>
</form>
</div>
</div>