Модальне вікно на HTML5, CSS3 і прихованих чекбоксах

78

Судячи по коментарям, тема створення модальних вікон досить популярна. Я не раз вже описував різні техніки виконання, як з допомогою jQuery, так і на чистому CSS. Та й в інтернеті, інформації по темі предостатньо, і кожен може вибрати для себе оптимальний варіант.
Мене більше цікавлять рішення без використання javascript, не тому-що в мене якась фобія до js, ні, мені просто цікаві експерименти, пошук нових можливостей зв’язки html+css, тим більше що останнім часом ці можливості істотно розширилися.
Приховані чебоксы(checkbox) я пару раз використовував при розробці блоків в стилі «акордеон», чому б не застосувати цю ж методу і для реалізації спливаючих(модальних) вікон. Виявляється все досить просто, давайте розглянемо детальніше, як з допомогою властивостей CSS3 і нових синтаксичних особливостей HTML5, можна швидко і без особливих труднощів організувати на сторінках своїх сайтів роботу привабливих модальних віконець.

Подивіться живий приклад, протестуйте в різних браузерах і на різних пристроях, модальні вікна відмінно вписуються в будь-які розміри. У прикладі представив три варіанти використання, стандартне діалогове вікно, інтегрована контактна форма і вбудована картинка в модальне вікно.

Дивитися Демо

При формуванні html-каркаса модального вікна керувався принципами побудови стандартної html-сторінки, тобто наше вікно складається з базового контейнера

, який в свою чергу поділений на сектори, шар затемнення, модальний блок

з заголовком

, центральним блоком

і підвалом

.

Модальное окно на HTML5, CSS3

HTML Каркас

На ряду з використанням стандартних елементів html тегів і , для визначення стану і властивості об’єктів, застосував ARIA-атрибут зі складу HTML5-специфікації, зокрема атрибут aria-hidden, який показує стан «hidden» у поточного елемента, у нашому випадку це зв’язка тегів і , визначальні елементи користувальницького інтерфейсу модальних вікон.

Атрибут for це ніщо інше як ідентифікатор елемента, з яким слід встановити зв’язок, при використанні на одній сторінці кількох модальних вікон з різним вмістом, слід пам’ятати про те, що ідентифікатор повинен бути різними, встановленим згідно з id того чи іншого мод. вікна, for=”modal-1″, for=”modal-2″ і т. д.

Відкрити

Відкрити

CSS

Стилістика зовнішнього вигляду модального вікна нагадує стиль спливаючих віконець з набору елементів Bootstrap, у разі необхідності, дуже легко змінюється CSS. Безпосередньо в код css прописав короткі коментарі, так що, вам буде легше розібратися, що до чого і навіщо))).

/* Стилі модального вікна */
.modal-header h2 {
color: #555;
font-size: 20px;
font-weight: normal;
line-height: 1;
margin: 0;
}
/* кнопка закриття вікна */
.modal .btn-close {
color: #aaa;
cursor: pointer;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.modal .btn-close:hover {
color: red;
}
/* шар затемнення */
.modal-wrap:before {
content: "";
display: none;
background: rgba(0, 0, 0, .3);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 101;
}
.modal-overlay {
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 102;
}
/* активація шару затемнення і модального блоку */
.modal-open:checked ~ .modal-wrap:before,
.modal-open:checked ~ .modal-wrap .modal-overlay {
display: block;
}
.modal-open:checked ~ .modal-wrap .modal-dialog {
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 20%;
}
/* елементи модального вікна */
.modal-dialog {
background: #fefefe;
border: none;
border-radius: 5px;
position: fixed;
width: 80%;
max-width: 500px;
left: 50%;
top: -100%;
-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-webkit-transform: translate(-50%, -500%);
-ms-transform: translate(-50%, -500%);
-o-transform: translate(-50%, -500%);
transform: translate(-50%, -500%);
-webkit-transition: -webkit-transform 0.4 s ease-out;
-moz-transition: -moz-transform 0.4 s ease-out;
-o-transition: -o-transform 0.4 s ease-out;
transition: transform 0.4 s ease-out;
z-index: 103;
}
.modal-body {
padding: 20px;
}
.modal-body p {
margin: 0;
}
.modal-header,
.modal-footer {
padding: 20px 20px;
}
.modal-header {
border-bottom: #eaeaea solid 1px;
}
.modal-header h2 {
font-size: 20px;
margin: 0;
}
.modal-footer {
border-top: #eaeaea solid 1px;
text-align: right;
}
/* адаптивні картинки в модальному блоці */
.modal-body img {
max-width: 100%;
height: auto;
}
/* кнопки */
.btn {
background: #fff;
border: #555 solid 1px;
border-radius: 3px;
cursor: pointer;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
}
.btn:hover, .btn:focus {
background: #f2f2f2;
}
.btn-primary {
background: #428bca;
border-color: #357ebd;
color: #fff;
}
.btn-primary:hover{
background: #66A1D3;
}

/* Стилі модального вікна */
.modal-header h2 {
color: #555;
font-size: 20px;
font-weight: normal;
line-height: 1;
margin: 0;
}
/* кнопка закриття вікна */
.modal .btn-close {
color: #aaa;
cursor: pointer;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.modal .btn-close:hover {
color: red;
}
/* шар затемнення */
.modal-wrap:before {
content: “”;
display: none;
background: rgba(0, 0, 0, .3);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 101;
}
.modal-overlay {
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 102;
}
/* активація шару затемнення і модального блоку */
.modal-open:checked ~ .modal-wrap:before,
.modal-open:checked ~ .modal-wrap .modal-overlay {
display: block;
}
.modal-open:checked ~ .modal-wrap .modal-dialog {
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 20%;
}
/* елементи модального вікна */
.modal-dialog {
background: #fefefe;
border: none;
border-radius: 5px;
position: fixed;
width: 80%;
max-width: 500px;
left: 50%;
top: -100%;
-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-webkit-transform: translate(-50%, -500%);
-ms-transform: translate(-50%, -500%);
-o-transform: translate(-50%, -500%);
transform: translate(-50%, -500%);
-webkit-transition: -webkit-transform 0.4 s ease-out;
-moz-transition: -moz-transform 0.4 s ease-out;
-o-transition: -o-transform 0.4 s ease-out;
transition: transform 0.4 s ease-out;
z-index: 103;
}
.modal-body {
padding: 20px;
}
.modal-body p {
margin: 0;
}
.modal-header,
.modal-footer {
padding: 20px 20px;
}
.modal-header {
border-bottom: #eaeaea solid 1px;
}
.modal-header h2 {
font-size: 20px;
margin: 0;
}
.modal-footer {
border-top: #eaeaea solid 1px;
text-align: right;
}
/* адаптивні картинки в модальному блоці */
.modal-body img {
max-width: 100%;
height: auto;
}
/* кнопки */
.btn {
background: #fff;
border: #555 solid 1px;
border-radius: 3px;
cursor: pointer;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
}
.btn:hover, .btn:focus {
background: #f2f2f2;
}
.btn-primary {
background: #428bca;
border-color: #357ebd;
color: #fff;
}
.btn-primary:hover{
background: #66A1D3;
}

Якщо вам не потрібен який-небудь з розділів, наприклад, немає потреби в заголовку, просто виключіть

з конструкції, не потрібен футер, прибираєте

. Все це добре видно на прикладі інтеграції контактної форми в тіло модального вікна.

Модальное окно на HTML5 и CSS3

Для прикладу, використовував трохи видозмінену форму зворотного зв’язку, про верстку якої розповідав раніше. Всі елементи форми чудово підлаштовуються під розміри вікна при перегляді на різних екранах пристроїв.

/* Елементи форми контактів */
.textbox{
height:45px;
width:100%;
border-radius:3px;
border:rgba(0,0,0,.3) 1px solid;
box-sizing:border-box;
font-size:14px;
padding:8px;
margin-bottom:20px;
}
.message:focus,
.textbox:focus{
outline:none;
border:rgba(24,149,215,1) 1px solid;
color:rgba(24,149,215,1);
}
.message{
background: rgba(255, 255, 255, 0.4);
width:100%;
height: 120px;
border:rgba(0,0,0,.3) 1px solid;
box-sizing:border-box;
-moz-border-radius: 3px;
font-size:14px;
-webkit-border-radius: 3px;
border-radius: 3px;
display:block;
padding:10px;
margin-bottom:20px;
overflow:hidden;
}
/* кнопка "відправити" форми */
.btn-form{
width:100%;
height:45px;
border:rgba(0,0,0,.2) 1px solid;
box-sizing:border-box;
background: #dedede;
color:#555;
transition:background .4s;
}
/* Зміна фону кнопки при наведенні */
.btn-form:hover{
background: #f2f2f2;
}

/* Елементи форми контактів */
.textbox{
height:45px;
width:100%;
border-radius:3px;
border:rgba(0,0,0,.3) 1px solid;
box-sizing:border-box;
font-size:14px;
padding:8px;
margin-bottom:20px;
}
.message:focus,
.textbox:focus{
outline:none;
border:rgba(24,149,215,1) 1px solid;
color:rgba(24,149,215,1);
}
.message{
background: rgba(255, 255, 255, 0.4);
width:100%;
height: 120px;
border:rgba(0,0,0,.3) 1px solid;
box-sizing:border-box;
-moz-border-radius: 3px;
font-size:14px;
-webkit-border-radius: 3px;
border-radius: 3px;
display:block;
padding:10px;
margin-bottom:20px;
overflow:hidden;
}
/* кнопка “відправити” форми */
.btn-form{
width:100%;
height:45px;
border:rgba(0,0,0,.2) 1px solid;
box-sizing:border-box;
background: #dedede;
color:#555;
transition:background .4s;
}
/* Зміна фону кнопки при наведенні */
.btn-form:hover{
background: #f2f2f2;
}

Багато, дуже багато, використовують модальні вікна для демонстрації різних зображень, так що передбачив і цей варіант. Картинкам, вбудовуваним в тіло вікна, поставив 100% ширину max-width: 100%; при автоматичному визначенні висоти height: auto;, з допомогою чого, зображення будуть коректно відображатися при зміні розмірів вікна в ту чи іншу сторону, виходить така от адаптивність)).

Картинки в модальном окне

Щоб отримати ефект lightbox, коли зображення заповнює весь простір спливаючого блоку, досить прибрати div заголовка, нижній блок з кнопкою і виставити необхідні відступи всередині модального вікна, в селекторі .modal-body.

Якщо раптом захочете розмістити в модальному вікні відеоролик з YoTube, або іншого відео-сервісу, скористайтеся способом, про який я розповідав раніше. Тільки слід пам’ятати про те, що оптимального рішення зупинки програвання відео після закриття вікна без підключення js, досі не знайдено, доведеться задовольнятися не дуже «кошерними» методами.

На цьому все! Залишається лише нагадати, що даний спосіб відмінно буде працювати тільки в сучасних браузерах, беззастережно підтримують властивості CSS3, що одночасно є і його єдиним недоліком.

Длубатися в коді можна тут.
На завершення, ще раз подивіться демо і при бажанні, для більш детального розбору, скачивайте вихідні коди, які я дбайливо упакував в архів, і виклав на своєму Яндекс.Диску:

ДемоИсходники

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

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