Регистрация и авторизация в модальном окне
Реализация авторизации и регистрации пользователя во всплывающем модальном окне.
Как реализовать:
1. Разметка html
|
1 2 3 4 5 6 7 |
<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> |
Добавляем переключатели с авторизации на регистрацию:
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
Ну и код самой формы:
|
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 |
<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
|
1 2 3 4 5 6 7 8 9 10 |
.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
|
1 2 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/main.js"></script> |
Готово.
