Адаптивні модальні форми входу та реєстрації

54

Адаптивные модальные формы входа и регистрации

Адаптивне модальний c функціями форм входу та реєстрації, з можливістю динамічного перемикання, без перезавантаження сторінки. Після появи вікна, користувач може легко переключатися з однієї форми в іншу, і при необхідності, вибрати опцію зміни пароля.
Сьогодні ми розглянемо, як все це можна реалізувати за допомогою зв’язки невеликого, але дуже функціонального плагін jQuery та нових стандартів CSS3.

Даний метод буде корисний, якщо ви захочете зробити так, щоб форми входу та реєстрації були доступні для користувачів на кожній сторінці вашого сайту. При вході на сайт чи реєстрації, користувачі не будуть перенаправлені на іншу сторінку, і зможуть виконувати всі необхідні дії «не відходячи від каси», все на одній сторінці.

Оформлення зовнішнього вигляду екранних форм реалізовано за допомогою CSS3, загальна вага плагіна зовсім не великий, відгук і завантаження модального вікна, відбувається практично без затримок.
Стовідсотково адаптивний макет, висота та ширина модального вікна з формами, автоматично встановлюються у відповідності з розмірами екранів пристроїв.

Модальные Формы Вход / Регистрация

ДемоСкачать

Приклад подивилися, тепер давайте розберемо в деталях всі основні компоненти модального вікна і форм, для того що б навчитися використовувати їх у себе на сайті.
Робота спливаючого вікна з формами входу та реєстрації, вибудувана на популярній бібліотеці javascript, виконуваному плагіні jQuey і сформованих стилях CSS. Всі ці інструменти необхідно підключити до вашого сайту. Останню актуальну версію бібліотеки jQuey можна підключити безпосередньо з Google, сам файл плагіна main.js і готовий набір сформованих стилів style.css знайдете в архіві.
Javascript прописуємо перед закриваючим тегом , CSS можна скопіювати і додати в файл стилів .css вашого сайту.

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

Якщо з якихось причин вас такий варіант підключення CSS не влаштовує, то в районі тегів розмістіть лінк на окремий файл style.css з архіву плагіна. Для забезпечення кросбраузерності стилів застосуємо CSS Reset (скидання стилів), підключивши до документа reset.css :

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

HTML Структура:

Для початку потрібно створити посилання на виклик модальних вікон з формами входу та реєстрації, або додати до вже існуючих, що відповідають оформленню класи і певний якір href=”#0″, для прив’язки до директорії.


<a class="cd-signin" href="#0">Увійдіть</a>
<a class="cd-signup" href="#0">Реєстрація</a>

Вхід
Реєстрація

Базовий контейнер модальних вікон на темному фоні і вбудовані форми з елементами управління, розміщуємо в тілі сторінки. Для більшого розуміння, розмежував сектора і додав коментарі. Всі елементи конструкції, міцно пов’язані з CSS через певні класи, так що змінити дизайн форм у відповідності із загальним дизайном ваших сайтів, не складе особливої праці.

<div class="cd-user-modal"> 
<div class="cd-user-modal-container"> 
<ul class="cd-switcher">
<li><a href="#0">Увійдіть</a></li>
<li><a href="#0">Реєстрація</a></li>
</ul>
<div id="cd-login"> 
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-email" for="signin-email">E-mail</label>
<input class="full-width has-padding has-border" id="signin-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Тут повідомлення про помилку!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-password for="signin-password">Пароль</label>
<input class="full-width has-padding has-border" id="signin-password" type="text" placeholder="Пароль">
<a href="#0" class="hide-password">Сховати</a>
<span class="cd-error-message">Тут повідомлення про помилку!</span>
</p>
<p class="fieldset">
<input type="checkbox" id="remember-me" checked>
<label for="remember-me">Запам'ятати мене</label>
</p>
<p class="fieldset">
<input class="full-width" type="submit" value="Увійти">
</p>
</form>
<p class="cd-form-bottom-message"><a href="#0">Забули пароль?</a></p>

</div> 
<div id="cd-signup"> 
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-username" for="signup-username">Ім'я користувача</label>
<input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="Ім'я користувача">
<span class="cd-error-message">Тут повідомлення про помилку!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-email" for="signup-email">E-mail</label>
<input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Тут повідомлення про помилку!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-password for="signup-password">Пароль</label>
<input class="full-width has-padding has-border" id="signup-password" type="text" placeholder="Пароль">
<a href="#0" class="hide-password">Сховати</a>
<span class="cd-error-message">Тут повідомлення про помилку!</span>
</p>
<p class="fieldset">
<input type="checkbox" id="accept-terms">
<label for="accept-terms">Я згоден з <a href="#0">Умовами</a></label>
</p>
<p class="fieldset">
<input class="full-width has-padding" type="submit" value="Створити акаунт">
</p>
</form>

</div> 
<div id="cd-reset password"> 
<p class="cd-form-message">Забули пароль? Будь ласка, введіть адресу своєї електронної пошти. Ви отримаєте посилання, щоб створити новий пароль.</p>
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-email" for="reset-email">E-mail</label>
<input class="full-width has-padding has-border" id="reset-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Тут повідомлення про помилку!</span>
</p>
<p class="fieldset">
<input class="full-width has-padding" type="submit" value="Відновити пароль">
</p>
</form>
<p class="cd-form-bottom-message"><a href="#0">Повернутися до входу</a></p>
</div> 
<a href="#0" class="cd-close-form">Закрити</a>
</div> 
</div> 
  • Вхід
  • Реєстрація

E-mail
Тут повідомлення про помилку!

Пароль
Приховати
Тут повідомлення про помилку!

Запам’ятати мене

Забули пароль?

Ім’я користувача
Тут повідомлення про помилку!

E-mail
Тут повідомлення про помилку!

Пароль
Приховати
Тут повідомлення про помилку!

Я згоден з Умовами

Забули пароль? Будь ласка, введіть адресу своєї електронної пошти. Ви отримаєте посилання, щоб створити новий пароль.

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.3 s 0, visibility 0 0.3 s;
-moz-transition: opacity 0.3 s 0, visibility 0 0.3 s;
transition: opacity 0.3 s 0, visibility 0 0.3 s;
}
.cd-user-modal.is-visible {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.3 s 0, visibility 0 0;
-moz-transition: opacity 0.3 s 0, visibility 0 0;
transition: opacity 0.3 s 0, visibility 0 0;
}
.cd-user-modal.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.25 em;
-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.3 s;
-moz-transition-duration: 0.3 s;
transition-duration: 0.3 s;
}
.cd-user-modal-container .cd-switcher:after {
content: "";
display: table;
clear: both;
}
.cd-user-modal-container .cd-switcher li {
width: 50%;
float: left;
text-align: center;
}
.cd-user-modal-container .cd-switcher li:first-child a {
border-radius: .25em 0 0 0;
}
.cd-user-modal-container .cd-switcher li:last-child a {
border-radius: 0 .25em 0 0;
}
.cd-user-modal-container .cd-switcher a {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
background: #d2d8d8;
color: #809191;
}
.cd-user-modal-container .cd-switcher a.selected {
background: #FFF;
color: #505260;
}
@media only screen and (min-width: 600px) {
.cd-user-modal-container {
margin: 4em auto;
}
.cd-user-modal-container .cd-switcher a {
height: 70px;
line-height: 70px;
}
}
.cd-form {
padding: 1.4 em;
}
.cd-form .fieldset {
position: relative;
margin: 1.4 em 0;
}
.cd-form .fieldset:first-child {
margin-top: 0;
}
.cd-form .fieldset:last-child {
margin-bottom: 0;
}
.cd-form label {
font-size: 14px;
font-size: 0.875 rem;
}
.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-form label.cd-username {
background-image: url("../img/cd-icon-username.svg");
}
.cd-form label.cd-email {
background-image: url("../img/cd-icon-email.svg");
}
.cd-form label.cd-password {
background-image: url("../img/cd-icon-password.svg");
}
.cd-form input {
margin: 0;
padding: 0;
border-radius: 0.25 em;
}
.cd-form input.full-width {
width: 100%;
}
.cd-form input.has-padding {
padding: 12px 20px 12px 50px;
}
.cd-form input.has-border {
border: 1px solid #d2d8d8;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
.cd-form input.has-border:focus {
border-color: #343642;
box-shadow: 0 0 5px rgba(52, 54, 66, 0.1);
outline: none;
}
.cd-form input.has-error {
border: 1px solid #d76666;
}
.cd-form input[type=password] {
/* простір для кнопки Приховати */
padding-right: 65px;
}
.cd-form input[type=submit] {
padding: 16px 0;
cursor: pointer;
background: #2f889a;
color: #FFF;
font-weight: bold;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
.no-touch .cd-form input[type=submit]:hover, .no-touch .cd-form input[type=submit]:focus {
background: #3599ae;
outline: none;
}
.cd-form .hide-password {
display: inline-block;
position: absolute;
right: 0;
top: 0;
padding: 6px 15px;
border-left: 1px solid #d2d8d8;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 14px;
font-size: 0.875 rem;
color: #343642;
}
.cd-form .cd-error-message {
display: inline-block;
position: absolute;
left: -5px;
bottom: -35px;
background: rgba(215, 102, 102, 0.9);
padding: .8em;
z-index: 2;
color: #FFF;
font-size: 13px;
font-size: 0.8125 rem;
border-radius: 0.25 em;
/* запобігання кліків і дотику */
pointer-events: none;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.2 s 0, visibility 0 0.2 s;
-moz-transition: opacity 0.2 s 0, visibility 0 0.2 s;
transition: opacity 0.2 s 0, visibility 0 0.2 s;
}
.cd-form .cd-error-message::after {
/* куточок повідомлення про помилку */
content: ";
position: absolute;
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-form .cd-error-message.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.2 s 0, visibility 0 0;
-moz-transition: opacity 0.2 s 0, visibility 0 0;
transition: opacity 0.2 s 0, visibility 0 0;
}
@media only screen and (min-width: 600px) {
.cd-form {
padding: 2em;
}
.cd-form .fieldset {
margin: 2em 0;
}
.cd-form .fieldset:first-child {
margin-top: 0;
}
.cd-form .fieldset:last-child {
margin-bottom: 0;
}
.cd-form input.has-padding {
padding: 16px 20px 16px 50px;
}
.cd-form input[type=submit] {
padding: 16px 0;
}
}
.cd-form-message {
padding: 1.4 em 1.4 em 0;
font-size: 14px;
font-size: 0.875 rem;
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 {
position: absolute;
width: 100%;
left: 0;
bottom: -30px;
text-align: center;
font-size: 14px;
font-size: 0.875 rem;
}
.cd-form-bottom-message a {
color: #FFF;
text-decoration: underline;
}
.cd-close-form {
/* стиль X кнопки вгорі праворуч */
display: block;
position: absolute;
width: 40px;
height: 40px;
right: 0;
top: -40px;
background: url("../img/cd-icon-close.svg") no-repeat center center;
text-indent: 100%;
white-space: nowrap;
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;
}

.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.3 s 0, visibility 0 0.3 s;
-moz-transition: opacity 0.3 s 0, visibility 0 0.3 s;
transition: opacity 0.3 s 0, visibility 0 0.3 s;
}
.cd-user-modal.is-visible {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.3 s 0, visibility 0 0;
-moz-transition: opacity 0.3 s 0, visibility 0 0;
transition: opacity 0.3 s 0, visibility 0 0;
}
.cd-user-modal.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.25 em;
-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.3 s;
-moz-transition-duration: 0.3 s;
transition-duration: 0.3 s;
}
.cd-user-modal-container .cd-switcher:after {
content: “”;
display: table;
clear: both;
}
.cd-user-modal-container .cd-switcher li {
width: 50%;
float: left;
text-align: center;
}
.cd-user-modal-container .cd-switcher li:first-child a {
border-radius: .25em 0 0 0;
}
.cd-user-modal-container .cd-switcher li:last-child a {
border-radius: 0 .25em 0 0;
}
.cd-user-modal-container .cd-switcher a {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
background: #d2d8d8;
color: #809191;
}
.cd-user-modal-container .cd-switcher a.selected {
background: #FFF;
color: #505260;
}
@media only screen and (min-width: 600px) {
.cd-user-modal-container {
margin: 4em auto;
}
.cd-user-modal-container .cd-switcher a {
height: 70px;
line-height: 70px;
}
}
.cd-form {
padding: 1.4 em;
}
.cd-form .fieldset {
position: relative;
margin: 1.4 em 0;
}
.cd-form .fieldset:first-child {
margin-top: 0;
}
.cd-form .fieldset:last-child {
margin-bottom: 0;
}
.cd-form label {
font-size: 14px;
font-size: 0.875 rem;
}
.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-form label.cd-username {
background-image: url(“../img/cd-icon-username.svg”);
}
.cd-form label.cd-email {
background-image: url(“../img/cd-icon-email.svg”);
}
.cd-form label.cd-password {
background-image: url(“../img/cd-icon-password.svg”);
}
.cd-form input {
margin: 0;
padding: 0;
border-radius: 0.25 em;
}
.cd-form input.full-width {
width: 100%;
}
.cd-form input.has-padding {
padding: 12px 20px 12px 50px;
}
.cd-form input.has-border {
border: 1px solid #d2d8d8;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
.cd-form input.has-border:focus {
border-color: #343642;
box-shadow: 0 0 5px rgba(52, 54, 66, 0.1);
outline: none;
}
.cd-form input.has-error {
border: 1px solid #d76666;
}
.cd-form input[type=password] {
/* простір для кнопки Приховати */
padding-right: 65px;
}
.cd-form input[type=submit] {
padding: 16px 0;
cursor: pointer;
background: #2f889a;
color: #FFF;
font-weight: bold;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
.no-touch .cd-form input[type=submit]:hover, .no-touch .cd-form input[type=submit]:focus {
background: #3599ae;
outline: none;
}
.cd-form .hide-password {
display: inline-block;
position: absolute;
right: 0;
top: 0;
padding: 6px 15px;
border-left: 1px solid #d2d8d8;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 14px;
font-size: 0.875 rem;
color: #343642;
}
.cd-form .cd-error-message {
display: inline-block;
position: absolute;
left: -5px;
bottom: -35px;
background: rgba(215, 102, 102, 0.9);
padding: .8em;
z-index: 2;
color: #FFF;
font-size: 13px;
font-size: 0.8125 rem;
border-radius: 0.25 em;
/* запобігання кліків і дотику */
pointer-events: none;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.2 s 0, visibility 0 0.2 s;
-moz-transition: opacity 0.2 s 0, visibility 0 0.2 s;
transition: opacity 0.2 s 0, visibility 0 0.2 s;
}
.cd-form .cd-error-message::after {
/* куточок повідомлення про помилку */
content: “;
position: absolute;
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-form .cd-error-message.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.2 s 0, visibility 0 0;
-moz-transition: opacity 0.2 s 0, visibility 0 0;
transition: opacity 0.2 s 0, visibility 0 0;
}
@media only screen and (min-width: 600px) {
.cd-form {
padding: 2em;
}
.cd-form .fieldset {
margin: 2em 0;
}
.cd-form .fieldset:first-child {
margin-top: 0;
}
.cd-form .fieldset:last-child {
margin-bottom: 0;
}
.cd-form input.has-padding {
padding: 16px 20px 16px 50px;
}
.cd-form input[type=submit] {
padding: 16px 0;
}
}
.cd-form-message {
padding: 1.4 em 1.4 em 0;
font-size: 14px;
font-size: 0.875 rem;
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 {
position: absolute;
width: 100%;
left: 0;
bottom: -30px;
text-align: center;
font-size: 14px;
font-size: 0.875 rem;
}
.cd-form-bottom-message a {
color: #FFF;
text-decoration: underline;
}
.cd-close-form {
/* стиль X кнопки вгорі праворуч */
display: block;
position: absolute;
width: 40px;
height: 40px;
right: 0;
top: -40px;
background: url(“../img/cd-icon-close.svg”) no-repeat center center;
text-indent: 100%;
white-space: nowrap;
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:

ДемоСкачать

З Повагою, Андрій .

Буду вдячний, якщо поділитеся посиланням на запис в своїх соціальних мережах: