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:

<nav class="cd-main-nav js-main-nav">
   <ul class="cd-main-nav__list js-signin-modal-trigger">
      <!-- inser more links here -->
      <li><a class="cd-main-nav__item cd-main-nav__item--signin" href="#0" data-signin="login">Sign in</a></li>
      <li><a class="cd-main-nav__item cd-main-nav__item--signup" href="#0" data-signin="signup">Sign up</a></li>
   </ul>
</nav>

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:

<div class="cd-signin-modal js-signin-modal"> <!-- this is the entire modal form, including the background -->
   <div class="cd-signin-modal__container"> <!-- this is the container wrapper -->
      <ul class="cd-signin-modal__switcher js-signin-modal-switcher js-signin-modal-trigger">
         <li><a href="#0" data-signin="login" data-type="login">Sign in</a></li>
         <li><a href="#0" data-signin="signup" data-type="signup">New account</a></li>
      </ul>
   </div> <!-- cd-signin-modal__container -->
</div> <!-- cd-signin-modal -->

and the submission forms:

<div class="cd-signin-modal js-signin-modal"> <!-- this is the entire modal form, including the background -->
   <div class="cd-signin-modal__container"> <!-- this is the container wrapper -->
      <!-- switcher tab here -->

      <div class="cd-signin-modal__block js-signin-modal-block" data-type="login"> <!-- log in form -->
         <!-- form here -->
      </div> <!-- cd-signin-modal__block -->

      <div class="cd-signin-modal__block js-signin-modal-block" data-type="signup"> <!-- sign up form -->
         <!-- form here -->
      </div> <!-- cd-signin-modal__block -->

      <div class="cd-signin-modal__block js-signin-modal-block" data-type="reset"> <!-- reset password form -->
         <!-- form here -->
      </div> <!-- cd-signin-modal__block -->

      <a href="#0" class="cd-signin-modal__close js-close">Close</a>
   </div> <!-- cd-signin-modal__container -->
</div> <!-- cd-signin-modal -->

A .cd-signin-modal__error span has been added to 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 .cd-signin-modal--is-visible.

.cd-signin-modal {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.cd-signin-modal.cd-signin-modal--is-visible {
  visibility: visible;
  opacity: 1;
}

The .cd-signin-modal__close (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, there could be not enough space around the form, so a close link turns out helpful.

In each form, we decided to hide the text labels and replace them with icons (using the .cd-signin-modal__label--image-replace class). It's not a good practice for long forms (we added placeholders, 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 than password type). 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 .cd-signin-modal__hide-password link.
When user clicks this link, the password input type is changed (from 'password' to 'text' or vice-versa):

/* this is the password input field */
var password = target.previousElementSibling;
( 'password' == password.getAttribute('type') ) ? password.setAttribute('type', 'text') : password.setAttribute('type', 'password');
target.textContent = ( 'Hide' == target.textContent ) ? 'Show' : 'Hide';
putCursorAtEnd(password);

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