JQuery implements login and registry ticket switching in the pop-up window

JQuery implements login and registry ticket switching in the pop-up window

This article recommends a jQuery special effect for switching between logon and registry tickets in the pop-up window. Applicable browsers: IE8 +, FireFox, Chrome, Safari, and Opera. It is very convenient and practical. If you need it, you can refer to it.

When you click the "Log on" or "register" button on the page, a modal window is displayed, which is a pop-up layer. We can easily switch between logon and registry tickets on the pop-up layer, it is very convenient for users. You do not need to close the layer and click to switch to other operations. It has been widely used on many websites.

In this article, we use jQuery, CSS3, and html5.

HTML

We now set two link buttons on the home page, namely the logon and registration buttons.

?

1 2 3 4 5 6

<Nav class = "main_nav"> <Ul> <Li> <a class = "cd-signin" href = "#0"> logon </a> </li> <Li> <a class = "cd-signup" href = "#0"> Registration </a> </li> </Ul> </Nav>

Then, create a modal window to pop up the layer div. cd-user-modal: Put two links for switching ul in the pop-up layer. cd-switcher, and then place the logon and registry tickets, corresponding 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 Logon </a> </li> <Li> <a href = "#0"> registering a new user </a> </li> </Ul>   <Div id = "cd-login"> <Form class = "cd-form"> <! -- Logon form --> </Form> </Div>   <Div id = "cd-signup"> <Form class = "cd-form"> <! -- Registry ticket --> </Form> </Div> </Div> </Div>

The above is the entire html structure, and the form part is omitted here. You can write your form structure as needed, or you can directly download and view the source code.

CSS

The default mode window has a style of visibility: hidden; and opacity: 0;, that is, it is invisible by default. The. is-visible method is used to determine whether the display is displayed. The following is the main css Code. For more detailed css code, please download the source code.

?

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.3 s 0, visibility 0 0.3 s; -Moz-transition: opacity 0.3 s 0, visibility 0 0.3 s; Transition: opacity 0.3 s 0, visibility 0 0.3 s; } . Cd-user-modal.is-visible { Visibility: visible; Opacity: 1; -Webkit-transition: opacity 0.3 s 0, visibility 0 0; -Moz-transition: opacity 0.3 s 0, visibility 0 0; Transition: opacity 0.3 s 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.3 seconds; -Moz-transition-duration: 0.3 s; Transition-duration: 0.3 s; } . 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 { Border-radius:. 25em 0 0 0; } . Cd-user-modal-container. cd-switcher li: last-child { Border-radius: 0. 25em 0 0; } . Cd-user-modal-container. cd-switcher { 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 close effects of the pop-up layer are called by jquery to control the style. is-visible. The switch form is called by jQuery to control the demo. is-selected.

?

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

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 ('lil'). eq (0). children ('A '), $ Tab_signup = $ form_modal_tab.children ('lil'). eq (1). children ('A '), $ Main_nav = $ ('. main_nav ');   // Pop-up window $ Main_nav.on ('click', function (event ){   If (condition (event.tar get). is ($ main_nav )){ // On mobile open the submenu $ (This). children ('ul '). toggleClass ('is-visable '); } Else { // On mobile close submenu $ Main_nav.children ('ul '). removeClass ('is-visable '); // Show modal layer $ Form_modal.addClass ('is-visable '); // Show the selected form (Condition (event.tar get). is ('. cd-signup '))? Signup_selected (): login_selected (); }   });   // Close the pop-up window $ ('. Cd-user-modal'). on ('click', function (event ){ If (condition (event.tar get). is ($ form_modal) | condition (event.tar get). is ('. cd-close-form ')){ $ Form_modal.removeClass ('is-visable '); } }); // Use the Esc key to close the pop-up window $ (Document). keyup (function (event ){ If (event. which = '27 '){ $ Form_modal.removeClass ('is-visable '); } });   // Switch the form $ Form_modal_tab.on ('click', function (event ){ Event. preventDefault (); (Condition (event.tar get). 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 instance also has a good Display Effect on mobile phones and other mobile devices. Because css3 is used, if you use IE browser, upgrade the version to IE9 or later. We strongly recommend that you download the source code and use it directly in your project.

The above is all the content of this article. I hope you will like it.