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


Posted in Javascript onJune 05, 2015

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

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以上。强烈建议大家下载源代码,稍微改下直接就可以运用到你的项目中。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
js使用递归解析xml
Dec 12 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
微信小程序模版渲染详解
Jan 26 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 #Javascript
javascript实现删除前弹出确认框
Jun 04 #Javascript
jquery插件validation实现验证身份证号等
Jun 04 #Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 #Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 #Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 #Javascript
深入理解JavaScript中的对象
Jun 04 #Javascript
You might like
php GeoIP的使用教程
2011/03/09 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
Vue如何实现响应式系统
2018/07/11 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
微信小程序云开发之使用云函数
2019/05/17 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
Python 转义字符详细介绍
2017/03/21 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
django2笔记之路由path语法的实现
2019/07/17 Python
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
学生安全责任书
2014/04/15 职场文书
城管大队整治方案
2014/05/06 职场文书
环保建议书200字
2014/05/14 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
小学中队活动总结
2015/05/11 职场文书
工作犯错保证书
2015/05/11 职场文书
小学生手册家长意见
2015/06/03 职场文书