在弹出窗口中切换登录和注册表的jQuery实现

当登录或注册按钮点击页面时，它会弹出一个模式窗口，是一个弹出层，我们可以很容易地在弹出的登录和注册表单上切换，方便用户，不需要关闭层来点击到其他操作，已经在很多网站上得到广泛应用。
本文结合一个jQuery和CSS3和HTML5技术来达到这一效果的使用例子。
HTML
我们现在在主页上设置两个链接按钮，也就是登录和注册按钮。

登录
登记

然后，一个模态窗口弹出层div.cd-user-modal设置。切换两ul.cd-switcher链接放置在弹出层，然后登录和注册列表放置，对应的div # CD和CD分别#注册登录div。
用户登录
新用户注册


以上是整个HTML结构，表单表单部分在这里省略，您可以根据您的需要自由地写出您的表单结构，您也可以直接下载源代码。
CSS
默认模式窗口的可见性：隐藏；和不透明度：0；风格，这是不可见的default.the.is-visible用于确定是否显示弹出。以下是主要的CSS代码，和更详细的CSS代码，请下载源代码视图。
{ cd用户模式
位置：固定；
顶部：0；
左：0；
宽度：100%；
身高：100%；
背景：RGBA（52, 54, 66，0.9）；
Z指数：3；
overflow-y：汽车；
光标：指针；
可见性：隐藏；
不透明性：0；
WebKit的过渡：透明度0.3s 0，能见度0 0.3s；
过渡：0 0.3s -moz混浊，能见度0 0.3s；
过渡：透明度0.3s 0，能见度0 0.3s；
}
{。cd-user-modal.is-visible
可见性：可见；
不透明性：1；
WebKit的过渡：透明度0.3s 0，知名度00；
过渡：0 0.3s -moz混浊，能见度00；
过渡：透明度0.3s 0，知名度00；
}
cd-user-modal.is-visible.cd-user-modal-container {。
WebKit的变换：（0）translatey；
translatey -moz变换：（0）；
MS：translatey变换（0）；
- o-transform：translatey（0）；
translatey变换：（0）；
}

{ cd用户模式容器
职位：相对；
宽度：90%；
马克斯：600px宽度；
背景：# FFF；
保证金：3em汽车4em；
光标：自动；
边界半径：0.25em；
WebKit的变换：translatey（- 30px）；
-moz变换：translatey（- 30px）；
MS变换：translatey（- 30px）；
- o-transform：translatey（- 30px）；
变换：translatey（- 30px）；
WebKit的过渡性质：WebKit的变换；
-moz过渡性质：-moz变换；
转换属性：转换；
WebKit的过渡时间：0.3s；
-个过渡时间：0.3s；
过渡时间：0.3s；
}
cd用户模式容器：CD切换器：{
内容：；
显示：表；
清楚：两者；
}
cd-user-modal-container.cd-switcher李{。
宽度：50%；
浮点数：左；
文本对齐：中心；
}
李：第一个孩子。cd-user-modal-container.cd-switcher {
25em边界半径：000；
}
李：最后一个孩子。cd-user-modal-container.cd-switcher {
0.25em边界半径：00；
}
cd-user-modal-container.cd-switcher一{。
显示块；
宽度：100%；
身高：50px；
行高：50px；
背景：# d2d8d8；
颜色：# 809191；
}
cd-user-modal-container.cd-switcher a.selected {。
背景：# FFF；
颜色：# 505260；
}

# CD光盘注册登录，{ #
显示：无；
}

# cd-login.is-selected，# CD选择{注册。
显示块；
}
jQuery
在弹出层的喷射和闭合效应称为jQuery控制style.is-visible，和开关组成的控制demonstration.is-selected jQuery的电话。

jQuery（文档）Ready（函数（$）{）
form_modal = $（var $ '。CD用户模型），
form_login = $（美元form_modal.find # CD登录），
form_signup = $（美元form_modal.find # CD注册），
form_modal_tab = $（$'。CD切换），
tab_login = $（美元form_modal_tab.children李'）。情商（0）儿童（A），
tab_signup = $（美元form_modal_tab.children李'）。情商（1）儿童（A），
main_nav = $（美元。main_nav）；

弹出窗口
main_nav.on美元（听到咔哒声，功能（事件）{

如果（$（事件。目标），（$ main_nav））{
手机打开子菜单 / /
$（这）。儿童（'ul）。ToggleClass（'is-visible）；
{人}
移动关闭子菜单 / /
main_nav.children美元（'ul）。RemoveClass（'is-visible）；
显示模式层
form_modal.addclass美元（'is-visible）；
显示所选窗体
（$（事件。目标），（'。CD注册'））signup_selected（）：login_selected（）；
}

}）；

关闭弹出窗口
$（'。CD用户模型），（听到咔哒声，功能（事件）{ {）
如果（$（事件。目标），（$ form_modal）| | $（事件。目标），（'。CD的封闭形式））{
form_modal.removeclass美元（'is-visible）；
}
}）；
使用ESC按钮关闭弹出窗口。
$（document）。Keyup（函数（事件）{
如果（他= =事件。这'）{
form_modal.removeclass美元（'is-visible）；
}
}）；

表单/开关
form_modal_tab.on美元（听到咔哒声，功能（事件）{
Event.preventDefault（）；
（$（事件。目标），（$ tab_login））login_selected（）：signup_selected（）；
}）；

功能login_selected（）{
form_login.addclass美元（'is-selected）；
form_signup.removeclass美元（'is-selected）；
form_fort_password.removeclass美元（'is-selected）；
tab_login.addclass美元（选中的）；
tab_signup.removeclass美元（选中的）；
}

功能signup_selected（）{
form_login.removeclass美元（'is-selected）；
form_signup.addclass美元（'is-selected）；
form_fort_password.removeclass美元（'is-selected）；
tab_login.removeclass美元（选中的）；
tab_signup.addclass美元（选中的）；
}

}）；
这个例子在手机和其他移动设备上也有很好的显示效果。由于CSS3效果，如果你使用IE浏览器，请升级版IE9。这是强烈建议您下载源代码并将其应用到你的项目中直接。

以上是本文的全部内容，希望大家能喜欢。