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 相关文章推荐
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
js模拟实现烟花特效
Mar 10 Javascript
js中实现继承的五种方法
Jan 25 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php数组键值用法实例分析
2015/02/27 PHP
js 居中漂浮广告
2010/03/21 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
JavaScript实现密码强度实时验证
2020/03/18 Javascript
vuex实现购物车功能
2020/06/28 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python 中random模块的常用方法总结
2017/07/08 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
秋季运动会广播稿大全
2014/02/17 职场文书
动员大会主持词
2014/03/20 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
学校食品安全实施方案
2014/06/14 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
初中语文教学研修日志
2015/11/13 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python