夏日博客

A-A+

jQuery实现弹出窗口切换登录与注册表单

2016年01月11日 前端设计 暂无评论 阅读 5 views 次

jQuery弹出窗口我相信各位都做过了，因这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.    <div id="cd-login"> <!-- 登录表单 -->  
  8.     <form class="cd-form">  
  9.      <p class="fieldset">  
  10.       <label class="image-replace cd-username" for="signin-username">用户名</label>  
  11.       <input class="full-width has-padding has-border" id="signin-username" type="text" placeholder="输入用户名">  
  12.      </p>  
  13.      <p class="fieldset">  
  14.       <label class="image-replace cd-password" for="signin-password">密码</label>  
  15.       <input class="full-width has-padding has-border" id="signin-password" type="text"  placeholder="输入密码">  
  16.      </p>  
  17.      <p class="fieldset">  
  18.       <input type="checkbox" id="remember-me" checked>  
  19.       <label for="remember-me">记住登录状态</label>  
  20.      </p>  
  21.      <p class="fieldset">  
  22.       <input class="full-width2" type="submit" value="登 录">  
  23.      </p>  
  24.     </form>  
  25.    </div>  
  26.    <div id="cd-signup"> <!-- 注册表单 -->  
  27.     <form class="cd-form">  
  28.      <p class="fieldset">  
  29.       <label class="image-replace cd-username" for="signup-username">用户名</label>  
  30.       <input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="输入用户名">  
  31.      </p>  
  32.      <p class="fieldset">  
  33.       <label class="image-replace cd-email" for="signup-email">邮箱</label>  
  34.       <input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="输入mail">  
  35.      </p>  
  36.      <p class="fieldset">  
  37.       <label class="image-replace cd-password" for="signup-password">密码</label>  
  38.       <input class="full-width has-padding has-border" id="signup-password" type="text"  placeholder="输入密码">  
  39.      </p>  
  40.      <p class="fieldset">  
  41.       <input type="checkbox" id="accept-terms">  
  42.       <label for="accept-terms">我已阅读并同意 <a href="#0">用户协议</a></label>  
  43.      </p>  
  44.      <p class="fieldset">  
  45.       <input class="full-width2" type="submit" value="注册新用户">  
  46.      </p>  
  47.     </form>  
  48.    </div>  
  49.    <a href="#0" class="cd-close-form">关闭</a>  
  50.   </div>  
  51.  </div>   

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

CSS

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

  1. .cd-user-modal {   
  2.   position: fixed;   
  3.   top: 0;   
  4.   left: 0;   
  5.   width: 100%;   
  6.   height: 100%;   
  7.   background: rgba(52, 54, 66, 0.9);   
  8.   z-index: 3;   
  9.   overflow-y: auto;   
  10.   cursor: pointer;   
  11.   visibility: hidden;   
  12.   opacity: 0;   
  13.   -webkit-transition: opacity 0.3s 0, visibility 0 0.3s;   
  14.   -moz-transition: opacity 0.3s 0, visibility 0 0.3s;   
  15.   transition: opacity 0.3s 0, visibility 0 0.3s;   
  16. }   
  17. .cd-user-modal.is-visible {   
  18.   visibility: visible;   
  19.   opacity: 1;   
  20.   -webkit-transition: opacity 0.3s 0, visibility 0 0;   
  21.   -moz-transition: opacity 0.3s 0, visibility 0 0;   
  22.   transition: opacity 0.3s 0, 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.   position: relative;   
  34.   width: 90%;   
  35.   max-width: 600px;   
  36.   background: #FFF;   
  37.   margin: 3em auto 4em;   
  38.   cursor: auto;   
  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.   clear: both;   
  56. }   
  57. .cd-user-modal-container .cd-switcher li {   
  58.   width: 50%;   
  59.   float: left;   
  60.   text-align: center;   
  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.   display: block;   
  70.   width: 100%;   
  71.   height: 50px;   
  72.   line-height: 50px;   
  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.   display: none;   
  83. }   
  84.    
  85. #cd-login.is-selected, #cd-signup.is-selected{   
  86.   display: block;   
  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以上。强烈建议大家下载源代码，稍微改下直接就可以运用到你的项目中。

标签：

给我留言