The JQuery Implementation pop-up window toggles the login and registration form

This article is recommended for you is a jquery implementation pop-up window in the switch login and registration form special effects. Applicable browsers: ie8+, FireFox, Chrome, Safari, Opera. Very convenient and practical, there is a need for small partners can refer to.

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.

?

1 2 3 4 5 6

<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.

?

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" > User login </a></li> <li><a href= "#0" > Register new User </a></li> </ul > <div id= "cd-login" > <form class= "cd-form" > <!--login form--> </form> </div> <div id= "Cd-signup" > <form class= "cd-form" > <!--registration form--> </form> </div> </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.

?

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 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

  Cd-user-modal {position:fixed; top:0; left:0; width:100%; height:100%; Background:rgba (in); 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-tr Ansition: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 4 Em 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-s Witcher Li:first-child a {border-radius:. 25em 0 0 0; cd-user-modal-container. Cd-switcher Li:last-child a {Border-ra dius:0 25em 0 0; Cd-user-modal-container. Cd-switcher a {display:block; width:100%; height:50px; line-height:50px; background: #d2d 8d8; Color: #809191; }. Cd-user-modal-container. cd-switcher a.selected {background: #FFF; color: #505260;}   #cd-login, #cd-signup {di Splay: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.

?

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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61-62

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 SU Bmenu $ (this). Children (' ul '). Toggleclass (' is-visible '); else {//on Mobile Close submenu $main _nav.children (' ul '). Removeclass (' is-visible ');//show modal layer $form _modal.add Class (' 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== ') {$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.

The above mentioned is the entire content of this article, I hope you can enjoy.