login signup preview
May 26, 2014 | 816 Feedbacks

Login/Signup modal window

This modal window allows users to login/signup into your website. Once opened, the user can easily switch from one form to the other, or select the reset password option.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

This resource can be particularly useful if you want to make the login/signup forms available to your users in each page of your website; users won’t be redirected to another page and will be able to continue with the task they were performing on that page.
The resource consists of a front-end coded version of the modal window.

Creating the structure

We inserted the Login/Signup links in our main menu:

For the modal window, we created two nested <div>, one ( the external one ) to cover the entire window, and the other to wrap the submission forms.

Inside the modal, we added a form switcher:

and the submission forms:

A .cd-error-message span has been added inside each form to show form error messages ( you can see them in the demo, clicking on both Login or Create account buttons).

Adding style

As default the modal window has  visibility: hidden; and opacity: 0;.
Both these properties are changed using the class .is-visible.

The .cd-close-form (form close link) has a display: none; on the laptop version. It seemed more natural on laptop to close the modal window just clicking outside the form or pressing the Esc keyboard button. On smaller screens (both tablets and mobile phones) there could be not enough space around the form, so a close link turns out helpful.

In each single form, we decided to hide the text labels and replace them with icons (using the .image-replace class). It’ not a good practice for long forms (we added placeholder, but  they should never be used as labels), but it works just fine for a simple form like ours ( the icons are as explanatory as labels so users don’t feel lost filling the form).

A last note: we set the font-size of all the input fields to be 16px. It prevents the auto zoom which happens on mobile devices when input fields are focused on.

Events handling

The only thing worth noting in the .js file is the function which allows users to hide/show the password. We decided to make the password visible as default (declaring the input as text type rather then password type). In this way we could get rid of the “repeat password” field in the sign-up form. User is free to hide the password (let’s say he/she is in a crowded place and wants to sign-in) just clicking on the .hide-password link.
When user clicks this link, the password input type is changed (from ‘password’ to ‘text’ or viceversa):

The .putCursorAtEnd() function focuses back on the input field and puts the cursor at the end of it (credit to CSS-Tricks)

Changelog

Nov 02, 2015
  • bug fixed - nav links triggering login modal
May 26, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.