JQuery implements login switch and registry ticket _ jquery in the pop-up window

Source: Internet
Author: User
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.

    
  
 
  • Login
  • Register

Then, create a modal window to pop up the layer p. 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 p # cd-login and p # cd-signup respectively.

 

  • User logon
  • Register a new user

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.

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

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 '); // The 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 (outputs (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) {ev Ent. 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'); $ metadata ('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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.