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">
     <p class="fieldset">
      <label class="image-replace cd-username" for="signin-username">用户名</label>
      <input class="full-width has-padding has-border" id="signin-username" type="text" placeholder="输入用户名">
     </p>

     <p class="fieldset">
      <label class="image-replace cd-password" for="signin-password">密码</label>
      <input class="full-width has-padding has-border" id="signin-password" type="text"  placeholder="输入密码">
     </p>

     <p class="fieldset">
      <input type="checkbox" id="remember-me" checked>
      <label for="remember-me">记住登录状态</label>
     </p>

     <p class="fieldset">
      <input class="full-width2" type="submit" value="登 录">
     </p>
    </form>
   </div>

   <div id="cd-signup"> <!-- 注册表单 -->
    <form class="cd-form">
     <p class="fieldset">
      <label class="image-replace cd-username" for="signup-username">用户名</label>
      <input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="输入用户名">
     </p>

     <p class="fieldset">
      <label class="image-replace cd-email" for="signup-email">邮箱</label>
      <input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="输入mail">
     </p>

     <p class="fieldset">
      <label class="image-replace cd-password" for="signup-password">密码</label>
      <input class="full-width has-padding has-border" id="signup-password" type="text"  placeholder="输入密码">
     </p>

     <p class="fieldset">
      <input type="checkbox" id="accept-terms">
      <label for="accept-terms">我已阅读并同意 <a href="#0">用户协议</a></label>
     </p>

     <p class="fieldset">
      <input class="full-width2" type="submit" value="注册新用户">
     </p>
    </form>
   </div>

   <a href="#0" class="cd-close-form">关闭</a>
  </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以上。强烈建议大家下载源代码，稍微改下直接就可以运用到你的项目中。

时间： 2024-09-24 04:07:16

jQuery实现弹出窗口切换登录与注册表单的相关文章

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

  本文给大家推荐的是一款jQuery实现弹出窗口中切换登录与注册表单的特效.适用浏览器:IE8+.FireFox.Chrome.Safari.Opera.十分的方便实用,有需要的小伙伴可以参考下. 当点击页面中的登录或注册按钮时,将会弹出一个模态窗口,就是一个弹出层,我们可以在弹出层上轻松的切换登录与注册表单,极大的方便用户,不需要关闭层再去点击转向其他操作,在很多网站上已经广泛应用. 本文结合实例,通过使用jQuery以及CSS3和HTML5技术实现这一效果. HTML 我们现在主页面上设置

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

当点击页面中的登录或注册按钮时,将会弹出一个模态窗口,就是一个弹出层,我们可以在弹出层上轻松的切换登录与注册表单,极大的方便用户,不需要关闭层再去点击转向其他操作,在很多网站上已经广泛应用. 本文结合实例,通过使用jQuery以及CSS3和HTML5技术实现这一效果. HTML 我们现在主页面上设置两个链接按钮,即登录和注册按钮. <nav class="main_nav"> <ul> <li><a class="cd-signin&

JS中artdialog弹出框控件之提交表单思路详解_javascript技巧

artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口. 前言: 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐--这一切全是XHTML+CSS原生实现. 完善的接口 它的接口完善,可以轻易与外部程序配合使用.如异步写入消息.控制位置.尺寸.显示与隐藏.关闭等. 细致的体验 如果不是在输入状态,它支持Esc快捷键关

jQuery+jqmodal弹出窗口实现代码分明_jquery

先上图,最终效果如下   点击"信息确认"   就是弹出一个确认窗口,把已经填报的信息都放到里面看看. 信息放里面很简答,主要是弹出窗口要做得好看点. 所以选择了jQuery+jqmodal实现 实现方法如下1.页面中引用jquery-1.4.2.js和jqModal.js,注意jQuery要在前面,因为jqmodal是以jQuery为基础的. 2.建立jqModal.css,并引用,主要是些美工的东东,注意div.jqmDialog 的 display为 none.高度和宽度要设置好

AeroWindow 基于JQuery的弹出窗口插件_jquery

可以一个页面中创建多个弹出窗,被选中的弹出窗会加亮显示,在同一网页中可以有多个弹出窗口,也可以通过双击窗口实现最大化,跟windows像极了.如果想要做一个类似操作系统的页面,用这个插件是完全可以实现的.兼容多种主流浏览器. 最基础的调用方法: 复制代码 代码如下: $('#YourContainerDiv').AeroWindow((WindowTitle:'hello world',)); 带全部参数的调用: 复制代码 代码如下: $('#YourContainerDiv').AeroWin

jquery实现弹出窗口效果的实例代码_jquery

JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域,并在开始时将其隐藏,只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来. 其大致步骤为: •创建一个装载弹出窗口的div 复制代码 代码如下: <html>  <head>    <title>jQuery实例1:浮动窗口</title>    <meta http-equiv="Content-Type" content="te

求助，jquery不能弹出窗口

问题描述 初次写jquery,不太熟悉,在网上找了一个代码,想修改一下用,但是一直不能弹出窗口,求指导:web.xml中的配置:<servlet-mapping><servlet-name>MyServlet</servlet-name><url-pattern>/servlet/MyServlet</url-pattern></servlet-mapping>js部分代码:<head><basehref="

基于jquery插件弹出窗口和确认框(可自定义样式)

今天跟大家分享一个jquery的自定义插件:MBox. 啥也不说,先上图,有图有真相 :) 实现代码:  代码如下 复制代码 (function () {     $.MsgBox = {         Alert: function (title, msg) {             GenerateHtml("alert", title, msg);             btnOk();  //alert只是弹出消息,因此没必要用到回调函数callback         

jquery 判断弹出窗口是否被拦截

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-