Регистрация и авторизация в модальном окне

Реализация авторизации и регистрации пользователя во всплывающем модальном окне.

Как реализовать:

1. Разметка html

<nav class="main-nav">
	<ul>
		<!-- all your main menu links here -->
		<li><a class="cd-signin" href="#0">Sign in</a></li>
		<li><a class="cd-signup" href="#0">Sign up</a></li>
	</ul>
</nav>

Добавляем переключатели с авторизации на регистрацию:

<div class="cd-user-modal"> <!-- this is the entire modal form, including the background -->
	<div class="cd-user-modal-container"> <!-- this is the container wrapper -->

		<ul class="cd-switcher">
			<li><a href="#0">Sign in</a></li>
			<li><a href="#0">New account</a></li>
		</ul>

	</div>
</div>

Ну и код самой формы:

<div class="cd-user-modal">
  <div class="cd-user-modal-container">

    <!-- switcher tab here -->

    <div id="cd-login">

      <!-- form here -->

      <p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p>
    </div>

    <div id="cd-signup">

      <!-- form here -->

    </div>

    <div id="cd-reset-password">

      <!-- form here -->

      <p class="cd-form-bottom-message"><a href="#0">Back to log-in</a></p>
    </div>
  </div>
  <a href="#0" class="cd-close-form">Close</a>
</div>

2. Добавляем стили CSS

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

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

По умолчанию модальному окну зададим свойства visibility: hidden; и opacity: 0;.
Данные свойства будут сменяться с помощью класса .is-visible.

3. И последнее, подключаем javascript и библиотеку jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/main.js"></script>

Готово.