
本文结合实例,通过使用jQuery以及CSS3和HTML5技术实现这一效果。
HTML
我们现在主页面上设置两个链接按钮,即登录和注册按钮。
- <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。
- <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代码请下载源代码查看。
- .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以上。强烈建议大家下载源代码,稍微改下直接就可以运用到你的项目中。
转载请注明:代码家园 » 可以相互切换的jQuery弹出登录与注册表单