首页>>表单>>jQuery仿TwitterLogin弹出式登录层(2020-10-14)

jQuery仿TwitterLogin弹出式登录层

jQuery仿TwitterLogin弹出式登录层
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="container">  
  2.   <div id="topnav" class="topnav"> Have an account? <a href="login" class="signin"><span>Sign in</span></a>  
  3.     <fieldset id="signin_menu">  
  4.       <form method="post" id="signin" action="https://twitter.com/sessions">  
  5.         <label for="username">Username or email</label>  
  6.         <input id="username" name="username" value="" title="username" tabindex="4" type="text">  
  7.         </p>  
  8.         <p>  
  9.           <label for="password">Password</label>  
  10.           <input id="password" name="password" value="" title="password" tabindex="5" type="password">  
  11.         </p>  
  12.         <p class="remember">  
  13.           <input id="signin_submit" value="Sign in" tabindex="6" type="submit">  
  14.           <input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox">  
  15.           <label for="remember">Remember me</label>  
  16.         </p>  
  17.         <p class="forgot"> <a href="#" id="resend_password_link">Forgot your password?</a> </p>  
  18.         <p class="forgot-username"> <A id=forgot_username_link   
  19. title="If you remember your password, try logging in with your email"   
  20. href="#">Forgot your username?</A> </p>  
  21.       </form>  
  22.     </fieldset>  
  23.   </div>  
  24. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.         $(document).ready(function() {  
  3.   
  4.             $(".signin").click(function(e) {            
  5.                 e.preventDefault();  
  6.                 $("fieldset#signin_menu").toggle();  
  7.                 $(".signin").toggleClass("menu-open");  
  8.             });  
  9.               
  10.             $("fieldset#signin_menu").mouseup(function() {  
  11.                 return false  
  12.             });  
  13.             $(document).mouseup(function(e) {  
  14.                 if($(e.target).parent("a.signin").length==0) {  
  15.                     $(".signin").removeClass("menu-open");  
  16.                     $("fieldset#signin_menu").hide();  
  17.                 }  
  18.             });           
  19.               
  20.         });  
  21. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_895.html