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