代码家园
 收藏本站  求助站长  站点地图  注册/登录
当前位置：代码家园 > 网页代码 > 弹出互动 > 正文内容 jQuery弹出登录与注册表单

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

  • 所属分类：弹出互动 文件大小：0.01 MB 阅读：正在加载...次 下载：正在加载...次 来源：www.daimajiayuan.com
  • 分享到：更多 ()
可以相互切换的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.   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以上。强烈建议大家下载源代码，稍微改下直接就可以运用到你的项目中。

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

继续浏览有关 弹出登录 的文章

也许你会喜欢和关注与本文内容高度相关的文章：

弹出登录框的JQuery浮动层

artDialog对话框在PHP下的简单应用-artDialog弹出登录层

相关代码

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