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

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

本文结合实例，通过使用jQuery以及CSS3和HTML5技术实现这一效果。

HTML

我们现在主页面上设置两个链接按钮，即登录和注册按钮。

• 登录
• 注册

然后，建立模态窗口弹出层div.cd-user-modal，在弹出层中放置两个用于切换的链接ul.cd-switcher，然后放置登录和注册表单，分别对应div#cd-login和div#cd-signup。

• 用户登录
• 注册新用户

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

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