jquery implementation pop-up window switch login and registration form

When you click the login or Register button in the page, will pop up a modal window, is a pop-up layer, we can easily switch on the pop-up layer login and registration form, a great convenience for users, do not need to close the layer and then click to other operations, in many sites have been widely used.

This article combines examples to achieve this through the use of jquery and CSS3 and HTML5 technologies.

Html

We now set two link buttons on the main page, that is, the Login and registration button.

<nav class= "Main_nav" >
<ul>
<li><a class= "Cd-signin" href= "#0" > Login </a></li>
<li><a class= "Cd-signup" href= "#0" > Registration </a></li>
</ul>
</nav>

Then, set up the modal window pop-up layer div.cd-user-modal, place two link ul.cd-switcher for the switch in the pop-up layer, then place the login and registration form, correspond to Div#cd-login and Div#cd-signup respectively.

<div class= "Cd-user-modal" >
<div class= "Cd-user-modal-container" >
<ul class= "Cd-switcher" >
<li><a href= "#0" > User login </a></li>
<li><a href= "#0" > Register new User </a></li>
</ul>

<div id= "Cd-login" > <!--login Form-->
<form class= "Cd-form" >
<p class= "FieldSet" >
<label class= "Image-replace cd-username" for= "Signin-username" > Username </label>
<input class= "Full-width has-padding has-border" id= "Signin-username" type= "text" placeholder= "Enter user name" >
</p>

<p class= "FieldSet" >
<label class= "Image-replace cd-password" for= "Signin-password" > Password </label>
<input class= "Full-width has-padding has-border" id= "Signin-password" type= "text" placeholder= "Enter password" >
</p>

<p class= "FieldSet" >
<input type= "checkbox" id= "Remember-me" checked>
<label for= "Remember-me" > Remember login status </label>
</p>

<p class= "FieldSet" >
<input class= "Full-width2" type= "submit" value= "Login" >
</p>
</form>
</div>

<div id= "Cd-signup" > <!--registration Form-->
<form class= "Cd-form" >
<p class= "FieldSet" >
<label class= "Image-replace cd-username" for= "Signup-username" > Username </label>
<input class= "Full-width has-padding has-border" id= "Signup-username" type= "text" placeholder= "Enter user name" >
</p>

<p class= "FieldSet" >
<label class= "Image-replace cd-email" for= "Signup-email" > Mailbox </label>
<input class= "Full-width has-padding has-border" id= "Signup-email" type= "email" placeholder= "input Mail" >
</p>

<p class= "FieldSet" >
<label class= "Image-replace cd-password" for= "Signup-password" > Password </label>
<input class= "Full-width has-padding has-border" id= "Signup-password" type= "text" placeholder= "Enter password" >
</p>

<p class= "FieldSet" >
<input type= "checkbox" id= "Accept-terms" >
<label for= "Accept-terms" > I have read and agreed to <a href= "#0" > User Agreement </a></label>
</p>

<p class= "FieldSet" >
<input class= "Full-width2" type= "Submit" value= "register new user" >
</p>
</form>
</div>

<a href= "#0" class= "Cd-close-form" > Shutdown </a>
</div>
</div>

The above is the entire HTML structure, where the form form section is omitted here, you can freely write your form structure according to the demand, you can also download and view the source directly.
Css
The default modal window has Visibility:hidden; and opacity:0 style, also is the default is not visible. Use. is-visible to decide whether to eject the display. The following is the main CSS code, more detailed CSS code please download the source code view.

. 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
The pop-up and shutdown effects of the pop-up layer are controlled by the jquery control style. Is-visible call, toggle form is demonstrated by jquery control. Is-selected call.

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 ');

Pop-up window
$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 ();
}

});

Close pop-up window
$ ('. Cd-user-modal '). On (' click ', Function (event) {
if ($ (event.target). Is ($form _modal) | | $ (event.target). is ('. Cd-close-form ')) {
$form _modal.removeclass (' is-visible ');
}
});
Use the ESC key to close the pop-up window
$ (document). KeyUp (function (event) {
if (event.which== ' 27 ') {
$form _modal.removeclass (' is-visible ');
}
});

Toggle Form
$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 ');
}

});
This example in mobile phones and other mobile devices also have a good display effect, because of the use of CSS3 effect, so if you use IE browser, please upgrade the version to IE9 above. It is strongly recommended that you download the source code, a little change directly can be applied to your project.