jQuery切换登录与注册弹出窗口

admin

下载地址:
加入VIP超值  

游客，如果您要查看本帖隐藏内容请回复

HTML首先在页面上加登录和注册按钮。
nav >接着建立模态窗口弹出层div.cd-user-modal，在弹出层中放置两个用于切换的链接ul.cd-switcher，然后放置登录和注册表单，分别对应div#cd-login和div#cd-signup。
div >jQuery弹出层的弹出和关闭效果由jquery控制样式.is-visible的调用，切换表单是由jQuery控制演示.is-selected的调用。
$(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');
$tab_login.addClass('selected');
$tab_signup.removeClass('selected');
$( .cd-switcher ).children( li ).removeClass( on
$( .cd-switcher ).children( li ).eq(0).addClass( on
function signup_selected() {
$form_login.removeClass('is-selected');
$form_signup.addClass('is-selected');
$tab_login.removeClass('selected');
$tab_signup.addClass('selected');
$( .cd-switcher ).children( li ).removeClass( on
$( .cd-switcher ).children( li ).eq(1).addClass( on
});该实例在手机等移动设备上也有很好的展示效果，由于运用了css3效果，所以如果您使用IE浏览器，请将版本升级到IE9以上，那样展示效果会更好。

下载地址:
加入VIP超值  

游客，如果您要查看本帖隐藏内容请回复