本文给大家推荐的是一款jQuery实现弹出窗口中切换登录与注册表单的特效。适用浏览器：IE8+、FireFox、Chrome、Safari、Opera。十分的方便实用，有需要的小伙伴可以参考下。

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

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

　　HTML

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

　　?

1 2 3 4 5 6 <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。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21   <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"> <!-- 登录表单 --> </form> </div>   <div id="cd-signup"> <form class="cd-form"> <!-- 注册表单 --> </form> </div> </div> </div>

　　以上是整个html结构，其中的form表单部分在此省略，大家可以根据需求自由写出你的表单结构，你也可以直接下载查看源码。

　　CSS

　　默认的模态窗口拥有 visibility: hidden; and opacity: 0;的样式，也就是默认不可见。通过.is-visible来决定是否弹出显示。以下是主要的css代码，更详细的css代码请下载源代码查看。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88   .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的调用。

　　?

1 2