Адаптивное модальное окно c функциями форм входа и регистрации, с возможностью динамичного переключения, без перезагрузки страницы. После появления окна, пользователь может легко переключаться из одной формы в другую, и при необходимости, выбрать опцию изменения пароля.
Сегодня мы рассмотрим как всё это можно реализовать с помощью связки небольшого, но очень функционального плагина jQuery и новых стандартов CSS3.
Данный метод будет полезен, если вы захотите сделать так, чтобы формы входа и регистрации были доступны для пользователей на каждой странице вашего сайта. При входе на сайт или регистрации, пользователи не будут перенаправлены на другую страницу, и смогут выполнять все необходимые действия «не отходя от кассы», всё на одной странице.
Оформление внешнего вида всплывающих форм реализовано с помощью CSS3, общий вес плагина совсем не большой, отклик и загрузка модального окна, происходит практически без задержек.
Стопроцентно адаптивный макет, высота и ширина модального окна с формами, автоматически устанавливаются в соответствии с размерами экранов пользовательских устройств.
Пример посмотрели, теперь давайте, разберём в деталях все основные компоненты модального окна и форм, для того что бы научиться использовать их у себя на сайте.
Работа всплывающего окна с формами входа и регистрации, выстроена на популярной библиотеке javascript, исполняемом плагине jQuey и сформированных стилях CSS. Все эти инструменты необходимо подключить к вашему сайту. Последнюю актуальную версию библиотеки jQuey можно подключить напрямую с Google, сам файл плагина main. js и готовый набор сформированных стилей style. css найдёте в архиве.
Javascript прописываем перед закрывающим тегом , стили CSS можно скопировать и добавить в файл стилей. css вашего сайта.
Если по каким-то причинам вас такой вариант подключения CSS не устраивает, то в районе тегов
разместите линк на отдельный файл style. css из архива плагина. Для обеспечения кроссбраузерности стилей применим CSS Reset (сброс стилей), подключив к документу reset. css:
HTML Структура:
Для начала нужно создать ссылки на вызов модальных окон с формами входа и регистрации, или добавить к уже существующим, соответствующие оформлению классы и определённый якорь в атрибуте href=”#0″, для привязки к плагину.
Вход
Регистрация
Базовый контейнер модальных окон на затемнённом фоне и встроенные формы с элементами управления, размещаем в теле страницы. Для большего понимания, разграничил сектора и добавил комментарии. Все элементы конструкции, прочно связаны с CSS через определённые классы, так что изменить дизайн форм в соответствии с общим дизайном ваших сайтов, не составит особого труда.
Вход
Регистрация
Здесь сообщение об ошибке!
Пароль
Скрыть
Запомнить меня
Забыли свой пароль?
Close –>
Имя пользователя
Пароль
Я согласен с Условиями
Закрыть –>
Забыли пароль? Пожалуйста, введите адрес своей электронной почты. Вы получите ссылку, чтобы создать новый пароль.
E-mail
Вернуться к входу
Закрыть
CSS Стили:
Базовый шаблон и элементы управления форм, автор выполнил в популярном, плоском стиле (Flat), с явным упором на минимализм. Ничего лишнего, в меру прозрачный фон затемнения, лёгкие для восприятия цвета, хорошо подобранный шрифт и иконки, для обозначения полей ввода. С помощью свойств CSS, вы легко сможете видоизменить любой элемент форм.. 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;
transition: opacity 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;}. 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. cd-user-modal-container. cd-switcher:after {
content: “”;
display: table;
clear: both;}. cd-switcher li {
width: 50%;
float: left;
text-align: center;}. cd-switcher li:first-child a {
border-radius:. 25em 0 0 0;}. cd-switcher li:last-child a {
border-radius: 0. 25em 0 0;}. cd-switcher a {
display: block;
height: 50px;
line-height: 50px;
background: #d2d8d8;
color: #809191;}. cd-switcher a. selected {
color: #505260;}
@media only screen and (min-width: 600px) {. cd-user-modal-container {
margin: 4em auto;}. cd-switcher a {
height: 70px;
line-height: 70px;}}. cd-form {
padding: 1. 4em;}. cd-form. fieldset {
margin: 1. 4em 0;}. fieldset:first-child {
margin-top: 0;}. fieldset:last-child {
margin-bottom: 0;}. cd-form label {
font-size: 14px;
font-size: 0. 875rem;}. cd-form label. image-replace {
/* заменить текст с иконой */
display: inline-block;
position: absolute;
left: 15px;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 20px;
width: 20px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
color: transparent;
text-shadow: none;
background-repeat: no-repeat;
background-position: 50% 0;}
/* Иконки полей ввода */. cd-username {
background-image: url(“.. /img/cd-icon-username. svg”);}. cd-email {
background-image: url(“.. /img/cd-icon-email. cd-password {
background-image: url(“.. /img/cd-icon-password. cd-form input {
margin: 0;
padding: 0;
border-radius: 0. 25em;}. cd-form input. full-width {
width: 100%;}. has-padding {
padding: 12px 20px 12px 50px;}. has-border {
border: 1px solid #d2d8d8;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;}. has-border:focus {
border-color: #343642;
box-shadow: 0 0 5px rgba(52, 54, 66, 0. 1);
outline: none;}. has-error {
border: 1px solid #d76666;}. cd-form input[type=password] {
/* пространство для кнопки Скрыть */
padding-right: 65px;}. cd-form input[type=submit] {
padding: 16px 0;
background: #2f889a;
color: #FFF;
font-weight: bold;
border: none;
appearance: none;}. no-touch. cd-form input[type=submit]:hover,. cd-form input[type=submit]:focus {
background: #3599ae;
outline: none;}. hide-password {
right: 0;
padding: 6px 15px;
border-left: 1px solid #d2d8d8;
font-size: 0. 875rem;
color: #343642;}. cd-error-message {
left: -5px;
bottom: -35px;
background: rgba(215, 102, 102, 0. 9);
padding:. 8em;
z-index: 2;
font-size: 13px;
font-size: 0. 8125rem;
/* предотвращения кликов и прикосновения */
pointer-events: none;
-webkit-transition: opacity 0. 2s 0, visibility 0 0. 2s;
-moz-transition: opacity 0. 2s;
transition: opacity 0. 2s;}. cd-error-message::after {
/* уголок сообщения об ошибке */
content: ”;
left: 22px;
bottom: 100%;
height: 0;
width: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid rgba(215, 102, 102, 0. 9);}. cd-error-message. is-visible {
-webkit-transition: opacity 0. 2s 0, visibility 0 0;
-moz-transition: opacity 0. 2s 0, visibility 0 0;
transition: opacity 0. 2s 0, visibility 0 0;}
@media only screen and (min-width: 600px) {. cd-form {
padding: 2em;}. fieldset {
margin: 2em 0;}. fieldset:first-child {
margin-bottom: 0;}. has-padding {
padding: 16px 20px 16px 50px;}. cd-form input[type=submit] {
padding: 16px 0;}}. cd-form-message {
padding: 1. 4em 1. 4em 0;
line-height: 1. 4;
text-align: center;}
@media only screen and (min-width: 600px) {. cd-form-message {
padding: 2em 2em 0;}}. cd-form-bottom-message {
bottom: -30px;
text-align: center;
font-size: 0. cd-form-bottom-message a {
text-decoration: underline;}. cd-close-form {
/* стиль X кнопки вверху справа */
width: 40px;
height: 40px;
top: -40px;
background: url(“.. /img/cd-icon-close. svg”) no-repeat center center;
overflow: hidden;}
@media only screen and (min-width: 1170px) {. cd-close-form {
display: none;}}
#cd-login, #cd-signup, #cd-reset-password {
display: none;}
#cd-login. is-selected, #cd-signup. is-selected, #cd-reset-password. is-selected {
display: block;}
В эффекте перехода появления, добавлена задержка, чтобы добиться плавного исчезновения модального окна при закрытии.
Примечание:. Размер шрифта всех полей ввода установлен по умолчанию 16px. Это предотвращает автоматическое масштабирование, которое происходит при просмотре на мобильных устройствах.
Авторская, буржуинская версия плагина находится здесь. Там же, вы сможете скачать оригинал.
Русскую версию, можете забрать с моего Яндекс. Диска, все необходимые файлы, бережно упакованы в один архив, перед этим не забудьте посмотреть, полностью адаптированный, живой пример работы этого замечательного плагина jQuery:
С Уважением, Андрей.
Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях: