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基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
Node.js编码规范
Jul 14 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
详解django模板与vue.js冲突问题
Jul 07 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中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
js定义类的几种方法(推荐)
2016/06/08 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
Python解析最简单的验证码
2016/01/07 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
python数据化运营的重要意义
2019/11/25 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
怎样写好自荐信和推荐信
2013/12/26 职场文书
美德少年事迹材料
2014/01/23 职场文书
更夫岗位责任制
2014/02/11 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
求职自荐信怎么写
2015/03/04 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
Mysql 一主多从的部署
2022/05/20 MySQL
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS