可以相互切换的jQuery弹出登录与注册表单

可以相互切换的jQuery弹出登录与注册表单
 点击预览  点击下载

本文结合实例,通过使用jQuery以及CSS3和HTML5技术实现这一效果。

HTML

我们现在主页面上设置两个链接按钮,即登录和注册按钮。

  1. <nav class="main_nav">  
  2.     <ul>  
  3.         <li><a class="cd-signin" href="#0">登录</a></li>  
  4.         <li><a class="cd-signup" href="#0">注册</a></li>  
  5.     </ul>  
  6. </nav>  

然后,建立模态窗口弹出层div.cd-user-modal,在弹出层中放置两个用于切换的链接ul.cd-switcher,然后放置登录和注册表单,分别对应div#cd-login和div#cd-signup。

  1. <div class="cd-user-modal">   
  2.     <div class="cd-user-modal-container">  
  3.         <ul class="cd-switcher">  
  4.             <li><a href="#0">用户登录</a></li>  
  5.             <li><a href="#0">注册新用户</a></li>  
  6.         </ul>  
  7.   
  8.         <div id="cd-login">   
  9.             <form class="cd-form">  
  10.                 <!-- 登录表单 -->  
  11.             </form>  
  12.         </div>  
  13.   
  14.         <div id="cd-signup">   
  15.             <form class="cd-form">  
  16.                 <!-- 注册表单 -->  
  17.             </form>  
  18.         </div>          
  19.     </div>  
  20. </div>   

以上是整个html结构,其中的form表单部分在此省略,大家可以根据需求自由写出你的表单结构,你也可以直接下载查看源码。

CSS

默认的模态窗口拥有 visibility: hidden; and opacity: 0;的样式,也就是默认不可见。通过.is-visible来决定是否弹出显示。以下是主要的css代码,更详细的css代码请下载源代码查看。

  1. .cd-user-modal {  
  2.   positionfixed;  
  3.   top: 0;  
  4.   left: 0;  
  5.   width100%;  
  6.   height100%;  
  7.   background: rgba(5254660.9);  
  8.   z-index3;  
  9.   overflow-y: auto;  
  10.   cursorpointer;  
  11.   visibilityhidden;  
  12.   opacity: 0;  
  13.   -webkit-transition: opacity 0.30, visibility 0 0.3s;  
  14.   -moz-transition: opacity 0.30, visibility 0 0.3s;  
  15.   transition: opacity 0.30, visibility 0 0.3s;  
  16. }  
  17. .cd-user-modal.is-visible {  
  18.   visibilityvisible;  
  19.   opacity: 1;  
  20.   -webkit-transition: opacity 0.30, visibility 0 0;  
  21.   -moz-transition: opacity 0.30, visibility 0 0;  
  22.   transition: opacity 0.30, visibility 0 0;  
  23. }  
  24. .cd-user-modal.is-visible .cd-user-modal-container {  
  25.   -webkit-transform: translateY(0);  
  26.   -moz-transform: translateY(0);  
  27.   -ms-transform: translateY(0);  
  28.   -o-transform: translateY(0);  
  29.   transform: translateY(0);  
  30. }  
  31.   
  32. .cd-user-modal-container {  
  33.   positionrelative;  
  34.   width90%;  
  35.   max-width600px;  
  36.   background#FFF;  
  37.   margin3em auto 4em;  
  38.   cursorauto;  
  39.   border-radius: 0.25em;  
  40.   -webkit-transform: translateY(-30px);  
  41.   -moz-transform: translateY(-30px);  
  42.   -ms-transform: translateY(-30px);  
  43.   -o-transform: translateY(-30px);  
  44.   transform: translateY(-30px);  
  45.   -webkit-transition-property: -webkit-transform;  
  46.   -moz-transition-property: -moz-transform;  
  47.   transition-property: transform;  
  48.   -webkit-transition-duration: 0.3s;  
  49.   -moz-transition-duration: 0.3s;  
  50.   transition-duration: 0.3s;  
  51. }  
  52. .cd-user-modal-container .cd-switcher:after {  
  53.   content"";  
  54.   display: table;  
  55.   clearboth;  
  56. }  
  57. .cd-user-modal-container .cd-switcher li {  
  58.   width50%;  
  59.   floatleft;  
  60.   text-aligncenter;  
  61. }  
  62. .cd-user-modal-container .cd-switcher li:first-child a {  
  63.   border-radius: .25em 0 0 0;  
  64. }  
  65. .cd-user-modal-container .cd-switcher li:last-child a {  
  66.   border-radius: 0 .25em 0 0;  
  67. }  
  68. .cd-user-modal-container .cd-switcher a {  
  69.   displayblock;  
  70.   width100%;  
  71.   height50px;  
  72.   line-height50px;  
  73.   background#d2d8d8;  
  74.   color#809191;  
  75. }  
  76. .cd-user-modal-container .cd-switcher a.selected {  
  77.   background#FFF;  
  78.   color#505260;  
  79. }  
  80.   
  81. #cd-login, #cd-signup {  
  82.   displaynone;  
  83. }  
  84.   
  85. #cd-login.is-selected, #cd-signup.is-selected{  
  86.   displayblock;  
  87. }  

jQuery

弹出层的弹出和关闭效果由jquery控制样式.is-visible的调用,切换表单是由jQuery控制演示.is-selected的调用。

  1. jQuery(document).ready(function($){  
  2.     var $form_modal = $('.cd-user-modal'),  
  3.         $form_login = $form_modal.find('#cd-login'),  
  4.         $form_signup = $form_modal.find('#cd-signup'),  
  5.         $form_modal_tab = $('.cd-switcher'),  
  6.         $tab_login = $form_modal_tab.children('li').eq(0).children('a'),  
  7.         $tab_signup = $form_modal_tab.children('li').eq(1).children('a'),  
  8.         $main_nav = $('.main_nav');  
  9.   
  10.     //弹出窗口  
  11.     $main_nav.on('click'function(event){  
  12.   
  13.         if( $(event.target).is($main_nav) ) {  
  14.             // on mobile open the submenu  
  15.             $(this).children('ul').toggleClass('is-visible');  
  16.         } else {  
  17.             // on mobile close submenu  
  18.             $main_nav.children('ul').removeClass('is-visible');  
  19.             //show modal layer  
  20.             $form_modal.addClass('is-visible');      
  21.             //show the selected form  
  22.             ( $(event.target).is('.cd-signup') ) ? signup_selected() : login_selected();  
  23.         }  
  24.   
  25.     });  
  26.   
  27.     //关闭弹出窗口  
  28.     $('.cd-user-modal').on('click'function(event){  
  29.         if( $(event.target).is($form_modal) || $(event.target).is('.cd-close-form') ) {  
  30.             $form_modal.removeClass('is-visible');  
  31.         }      
  32.     });  
  33.     //使用Esc键关闭弹出窗口  
  34.     $(document).keyup(function(event){  
  35.         if(event.which=='27'){  
  36.             $form_modal.removeClass('is-visible');  
  37.         }  
  38.     });  
  39.   
  40.     //切换表单  
  41.     $form_modal_tab.on('click'function(event) {  
  42.         event.preventDefault();  
  43.         ( $(event.target).is( $tab_login ) ) ? login_selected() : signup_selected();  
  44.     });  
  45.   
  46.     function login_selected(){  
  47.         $form_login.addClass('is-selected');  
  48.         $form_signup.removeClass('is-selected');  
  49.         $form_forgot_password.removeClass('is-selected');  
  50.         $tab_login.addClass('selected');  
  51.         $tab_signup.removeClass('selected');  
  52.     }  
  53.   
  54.     function signup_selected(){  
  55.         $form_login.removeClass('is-selected');  
  56.         $form_signup.addClass('is-selected');  
  57.         $form_forgot_password.removeClass('is-selected');  
  58.         $tab_login.removeClass('selected');  
  59.         $tab_signup.addClass('selected');  
  60.     }  
  61.   
  62. });  

该实例在手机等移动设备上也有很好的展示效果,由于运用了css3效果,所以如果您使用IE浏览器,请将版本升级到IE9以上。强烈建议大家下载源代码,稍微改下直接就可以运用到你的项目中。

转载请注明:代码家园 » 可以相互切换的jQuery弹出登录与注册表单

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)