转载

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

当点击页面中的登录或注册按钮时,将会弹出一个模态窗口,就是一个弹出层,我们可以在弹出层上轻松的切换登录与注册表单,极大的方便用户,不需要关闭层再去点击转向其他操作,在很多网站上已经广泛应用。

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

查看演示 下载源码

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

HTML

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

 <nav class="main_nav">  <ul>   <li><a class="cd-signin" href="#0">登录</a></li>   <li><a class="cd-signup" href="#0">注册</a></li>  </ul> </nav> 

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

 <div class="cd-user-modal">   <div class="cd-user-modal-container">   <ul class="cd-switcher">    <li><a href="#0">用户登录</a></li>    <li><a href="#0">注册新用户</a></li>   </ul>    <div id="cd-login">     <form class="cd-form">     <!-- 登录表单 -->    </form>   </div>    <div id="cd-signup">     <form class="cd-form">     <!-- 注册表单 -->    </form>   </div>    </div> </div>  

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

CSS

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

 .cd-user-modal {   position: fixed;   top: 0;   left: 0;   width: 100%;   height: 100%;   background: rgba(52, 54, 66, 0.9);   z-index: 3;   overflow-y: auto;   cursor: pointer;   visibility: hidden;   opacity: 0;   -webkit-transition: opacity 0.3s 0, visibility 0 0.3s;   -moz-transition: opacity 0.3s 0, visibility 0 0.3s;   transition: opacity 0.3s 0, visibility 0 0.3s; } .cd-user-modal.is-visible {   visibility: visible;   opacity: 1;   -webkit-transition: opacity 0.3s 0, visibility 0 0;   -moz-transition: opacity 0.3s 0, visibility 0 0;   transition: opacity 0.3s 0, visibility 0 0; } .cd-user-modal.is-visible .cd-user-modal-container {   -webkit-transform: translateY(0);   -moz-transform: translateY(0);   -ms-transform: translateY(0);   -o-transform: translateY(0);   transform: translateY(0); }  .cd-user-modal-container {   position: relative;   width: 90%;   max-width: 600px;   background: #FFF;   margin: 3em auto 4em;   cursor: auto;   border-radius: 0.25em;   -webkit-transform: translateY(-30px);   -moz-transform: translateY(-30px);   -ms-transform: translateY(-30px);   -o-transform: translateY(-30px);   transform: translateY(-30px);   -webkit-transition-property: -webkit-transform;   -moz-transition-property: -moz-transform;   transition-property: transform;   -webkit-transition-duration: 0.3s;   -moz-transition-duration: 0.3s;   transition-duration: 0.3s; } .cd-user-modal-container .cd-switcher:after {   content: "";   display: table;   clear: both; } .cd-user-modal-container .cd-switcher li {   width: 50%;   float: left;   text-align: center; } .cd-user-modal-container .cd-switcher li:first-child a {   border-radius: .25em 0 0 0; } .cd-user-modal-container .cd-switcher li:last-child a {   border-radius: 0 .25em 0 0; } .cd-user-modal-container .cd-switcher a {   display: block;   width: 100%;   height: 50px;   line-height: 50px;   background: #d2d8d8;   color: #809191; } .cd-user-modal-container .cd-switcher a.selected {   background: #FFF;   color: #505260; }  #cd-login, #cd-signup {   display: none; }  #cd-login.is-selected, #cd-signup.is-selected{   display: block; } 

jQuery

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

 jQuery(document).ready(function($){  var $form_modal = $('.cd-user-modal'),   $form_login = $form_modal.find('#cd-login'),   $form_signup = $form_modal.find('#cd-signup'),   $form_modal_tab = $('.cd-switcher'),   $tab_login = $form_modal_tab.children('li').eq(0).children('a'),   $tab_signup = $form_modal_tab.children('li').eq(1).children('a'),   $main_nav = $('.main_nav');  //弹出窗口  $main_nav.on('click', function(event){   if( $(event.target).is($main_nav) ) {    // on mobile open the submenu    $(this).children('ul').toggleClass('is-visible');   } else {    // on mobile close submenu    $main_nav.children('ul').removeClass('is-visible');    //show modal layer    $form_modal.addClass('is-visible');     //show the selected form    ( $(event.target).is('.cd-signup') ) ? signup_selected() : login_selected();   }  });  //关闭弹出窗口  $('.cd-user-modal').on('click', function(event){   if( $(event.target).is($form_modal) || $(event.target).is('.cd-close-form') ) {    $form_modal.removeClass('is-visible');   }   });  //使用Esc键关闭弹出窗口  $(document).keyup(function(event){   if(event.which=='27'){    $form_modal.removeClass('is-visible');   }  });  //切换表单  $form_modal_tab.on('click', function(event) {   event.preventDefault();   ( $(event.target).is( $tab_login ) ) ? login_selected() : signup_selected();  });  function login_selected(){   $form_login.addClass('is-selected');   $form_signup.removeClass('is-selected');   $form_forgot_password.removeClass('is-selected');   $tab_login.addClass('selected');   $tab_signup.removeClass('selected');  }  function signup_selected(){   $form_login.removeClass('is-selected');   $form_signup.addClass('is-selected');   $form_forgot_password.removeClass('is-selected');   $tab_login.removeClass('selected');   $tab_signup.addClass('selected');  } });  

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

正文到此结束
Loading...