Адаптивне модальний строго по центру

41

Як зробити стовідсотково адаптивне модальне вікно, яке до того ж виводилося строго по центру і однаково добре, без видимої ломки, виглядало на різних типах екранів пристроїв?
Питання звичайно цікаве, а процес реалізації і зовсім захоплюючий. Звичайно, макет модального вікна, про який сьогодні піде мова, швидше гумовий, так як адаптивність, в наворочених колах, передбачає наявність, прописних мета-тегів для мобільних пристроїв, медіа-запитів в css та інші встановлені «трендованными буржуинами» та іже з ними, стандартами.
До теми створення модальних вікон, я повертався багато разів, описував способи з використанням jQuery і виключно на чистому CSS3. У представленому сьогодні прикладі об’єднав деякі концепції і вийшло те, що вийшло. Не варто приймати цей метод, як керівництво до дії, скоріше це робочий матеріал, пошуки оптимальних рішень.

Дивіться живий приклад, а далі розглянемо трохи докладніше складові.

Адаптивное модальное окно на чистом CSS

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

Як бачите, при активації, модальне вікно з’являється строго по центру і не змінює свого положення при зміні розмірів екрану перегляду, плавно масштабується саме вікно. Для абсолютної центрування модального блоку метод із застосуванням властивості display: table cell;, на мій погляд, це один з найкращих і простих способів, про який докладно описано в статті на 456bereastreet.com. Є у цього рішення є маленький недолік — додаткова розмітка, необхідно цілих ))) три елемента. В розмітці Html в результаті, отримуємо наступну картину:

Html-розмітка

Заголовок модального вікна

Текстовий зміст....

Заголовок модального вікна

Текстовий зміст….

Викликається вікно ударом по посиланню, адреса якої, повинен відповідати ідентифікатору того чи іншого модального блоку. Об’єктом для посилання може служити практично будь-який елемент, у прикладі використовував у вигляді більш-менш оформленої кнопки:

Відкрити вікно 1

Відкрити вікно 1

Базовим контейнером, в який розміщуємо модальний блок з утриманням, є шар затемнення, найчастіше я виношу фон в окремий div, в даному ж випадку, вирішив об’єднати в єдину конструкцію всі елементи. Тести показали, що все працює нормально, тільки от з реалізацією закриття вікна по кліку поза зоною блоку(по шару затемнення), виникають труднощі.

Весь макет складається з чотирьох div-контейнерів з послідовною вкладеністю, під формування яких виділені окремі класи в css, при використанні мініатюр або відео, додається ще один блок. Ключові властивості відповідають за центрування вікна, залишаємо як є, експериментуйте з формуванням, як самого модального блоку, так і внутрішніх елементів:

CSS

/* шар затемнення */
.dm-overlay {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.65);
display: none;
overflow: auto;
width: 100%;
height: 100%;
z-index: 1000;
}
/* активуємо шар затемнення і модальне вікно */
.dm-overlay:target {
display: block;
/* анімація і час затримки */
-webkit-animation: fade .6s;
-moz-animation: fade .6s;
animation: fade .6s;
}
/* блокова таблиця */
.dm-table {
display: table;
width: 100%;
height: 100%;
}
/* осередок блокової таблиці */
.dm-cell {
display: table cell;
padding: 0 1em;
vertical-align: middle;
text-align: center;
}
/* модальний блок */
.dm-modal {
display: inline-block;
padding: 20px;
/* максимально можлива ширина */
max-width: 50em;
background: #607d8b;
/* зовнішня тінь блоку */
-webkit-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
color: #cfd8dc;
text-align: left;
/* анімація і час затримки */
-webkit-animation: fade .8s;
-moz-animation: fade .8s;
animation: fade .8s;
}

/* шар затемнення */
.dm-overlay {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.65);
display: none;
overflow: auto;
width: 100%;
height: 100%;
z-index: 1000;
}
/* активуємо шар затемнення і модальне вікно */
.dm-overlay:target {
display: block;
/* анімація і час затримки */
-webkit-animation: fade .6s;
-moz-animation: fade .6s;
animation: fade .6s;
}
/* блокова таблиця */
.dm-table {
display: table;
width: 100%;
height: 100%;
}
/* осередок блокової таблиці */
.dm-cell {
display: table cell;
padding: 0 1em;
vertical-align: middle;
text-align: center;
}
/* модальний блок */
.dm-modal {
display: inline-block;
padding: 20px;
/* максимально можлива ширина */
max-width: 50em;
background: #607d8b;
/* зовнішня тінь блоку */
-webkit-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
color: #cfd8dc;
text-align: left;
/* анімація і час затримки */
-webkit-animation: fade .8s;
-moz-animation: fade .8s;
animation: fade .8s;
}

Напевно, для центрування, замість елементів блокової таблиці table cell, простіше було б використовувати трансформацію, transform властивість з негативними процентними значеннями, але крім того, метод не працює в IE8 і необхідно використання префіксів, головне, він може заважати роботі інших ефектів з transform, а в деяких випадках при рендерінгу розмиваються краю блоку і текст. Хоча у випадку з IE8, модальні вікна на чистому CSS, так і так не спрацьовують.

Для визначення ширини модального блоку, як ви бачите, я використовував одиницю виміру у em і встановив максимальну ширину елемента max-width, так вікно видозмінюється більш коректно ніж при width: %;

Ніяких додаткових js-бібліотек не підключав до роботи, тільки магія CSS3. Модальний блок і шар затемнення, до пори до часу сховав за газ геть(з сторінки), з допомогою display: block;. Прикрутив простеньку анімацію через @keyframes, з допомогою властивості opacity, з невеликою затримкою, відбувається плавний перехід модального вікна і шару затемнення у відкритий стан. У кого з’явиться бажання, можете сміливо експериментувати, благо прикладів в мережі предостатньо.

/* анімація при появі затемнення і блоків з вмістом */
@-moz-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}

/* анімація при появі затемнення і блоків з вмістом */
@-moz-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}

Часто модальні вікна використовують для висновку, не тільки текстових повідомлень і різних форм, але і для демонстрації зображень, знаменитий lightbox і т. д. Так само, в купе з текстом органічно виглядають в спливаючих віконцях, вбудовані в текст мініатюри картинок. Постарався передбачити і такий варіант застосування, позначивши ряд виділених класів CSS, містять властивості формують виведення зображень всередині вікна.
Для мініатюр визначив можливість розміщення, як справа, так і зліва від тексту, з шириною в 25%, а масштабної картинці призначив ширину width: 100%; від батьківського контейнера, тим самим забезпечивши можливість пропорційного зміни, при перегляді на екранах різних користувацьких пристроїв. Про те як зробити картинки адаптивними, докладно розповідав раніше, саме цей метод і використовував.

Адаптивные изображения в модальном окне

/* зображення в модальному вікні */
.dm-modal img {
width: 100%;
height: auto;
}
/* мініатюри зображень */
.pl-left,.pl-right {
width: 25%;
height: auto;
}
.pl-right {
float: right;
margin: 5px 0 5px 15px;
}
.pl-left {
float: left;
margin: 5px 15px 5px 0;
}

/* зображення в модальному вікні */
.dm-modal img {
width: 100%;
height: auto;
}
/* мініатюри зображень */
.pl-left,.pl-right {
width: 25%;
height: auto;
}
.pl-right {
float: right;
margin: 5px 0 15px 5px;
}
.pl-left {
float: left;
margin: 15px 5px 5px 0;
}

Так і не знайшовши коректного, всіх і вся задовольняє способу зупинки програвання відео при закритті модального вікна, зібраного і працює на CSS3, все ж включив в приклад і варіант спливаючого блоку з адаптивним відео. Рішення по виключенню відеоролика не те щоб немає, є, але воно не зовсім кошерне, багатьох перекручених веб-справ майстрів, просто перевертає від використання порожнього атрибута href=”” ссылке кнопки закриття. Це і зрозуміло, в такому випадку відео зупиняється допомогою перезавантаження сторінки, що не є добре.
Відеоролики можете використовувати як свої, розміщені у себе на сервері, так і з будь-якого відеосервісу, пропонує різні методи вставки відео на сайт через iframe, object або embed. Докладно про модальне блоці відео на css3, ми розглядали раніше, в окремому уроці, кому цікаво, можете освіжити пам’ять.

/*відео в модальному вікні*/
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow:hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*відео в модальному вікні*/
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow:hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Адаптивное видео в модальном окне

Всі ключові, функціональні елементи, використовувані у формуванні модального блоку з вмістом, ми розглянули, мені залишається показати весь код css, який вийшов в результаті, невеликі коментарі допоможуть вам розібратися що до чого і навіщо:

/* Стилі модального вікна і змісту
-------------------------------------------------------------------------------*/
/* шар затемнення */
.dm-overlay {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.65);
display: none;
overflow: auto;
width: 100%;
height: 100%;
z-index: 1000;
}
/* активуємо модальне вікно */
.dm-overlay:target {
display: block;
-webkit-animation: fade .6s;
-moz-animation: fade .6s;
animation: fade .6s;
}
/* блокова таблиця */
.dm-table {
display: table;
width: 100%;
height: 100%;
}
/* осередок блокової таблиці */
.dm-cell {
display: table cell;
padding: 0 1em;
vertical-align: middle;
text-align: center;
}
/* модальний блок */
.dm-modal {
display: inline-block;
padding: 20px;
max-width: 50em;
background: #607d8b;
-webkit-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
color: #cfd8dc;
text-align: left;
}
/* зображення в модальному вікні */
.dm-modal img {
width: 100%;
height: auto;
}
/* мініатюри зображень */
.pl-left,
.pl-right {
width: 25%;
height: auto;
}
/* мініатюра праворуч */
.pl-right {
float: right;
margin: 5px 0 5px 15px;
}
/* мініатюра зліва */
.pl-left {
float: left;
margin: 5px 15px 5px 0;
}
/* вбудований відео в модальному вікні */
.video {
position: relative;
overflow: hidden;
padding-bottom: 56.25%;
height: 0;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* малюємо кнопарь закриття */
.close {
z-index: 9999;
float: right;
width: 30px;
height: 30px;
color: #cfd8dc;
text-align: center;
text-decoration: none;
line-height: 26px;
cursor: pointer;
}
.close:after {
display: block;
border: 2px solid #cfd8dc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
content: 'X';
-webkit-transition: all 0.6 s;
-moz-transition: all 0.6 s;
transition: all 0.6 s;
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-ms-transform: scale(0.85);
transform: scale(0.85);
}
/* кнопка закриття при наведенні */
.close:hover:after {
border-color: #fff;
color: #fff;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/* варіанти фонвой заливки модального блоку */
.green {
background: #388e3c!important;
}
.cyan {
background: #0097a7!important;
}
.teal {
background: #00796b!important;
}
/* двіжуха при появі блоків з вмістом */
@-moz-keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1
}
}
@-webkit-keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1
}
}

/* Стилі модального вікна і змісту
——————————————————————————-*//* шар затемнення */.dm-overlay {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.65);
display: none;
overflow: auto;
width: 100%;
height: 100%;
z-index: 1000;
}
/* активуємо модальне вікно */.dm-overlay:target {
display: block;
-webkit-animation: fade .6s;
-moz-animation: fade .6s;
animation: fade .6s;
}
/* блокова таблиця */.dm-table {
display: table;
width: 100%;
height: 100%;
}
/* осередок блокової таблиці */.dm-cell {
display: table cell;
padding: 0 1em;
vertical-align: middle;
text-align: center;
}
/* модальний блок */.dm-modal {
display: inline-block;
padding: 20px;
max-width: 50em;
background: #607d8b;
-webkit-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3);
color: #cfd8dc;
text-align: left;
}
/* зображення в модальному вікні */.dm-modal img {
width: 100%;
height: auto;
}
/* мініатюри зображень */.pl-left,
.pl-right {
width: 25%;
height: auto;
}
/* мініатюра праворуч */.pl-right {
float: right;
margin: 5px 0 15px 5px;
}
/* мініатюра зліва */.pl-left {
float: left;
margin: 15px 5px 5px 0;
}
/* вбудований відео в модальному вікні */.video {
position: relative;
overflow: hidden;
padding-bottom: 56.25%;
height: 0;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* малюємо кнопарь закриття */.close {
z-index: 9999;
float: right;
width: 30px;
height: 30px;
color: #cfd8dc;
text-align: center;
text-decoration: none;
line-height: 26px;
cursor: pointer;
}
.close:after {
display: block;
border: 2px solid #cfd8dc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
content: ‘X’;
-webkit-transition: all 0.6 s;
-moz-transition: all 0.6 s;
transition: all 0.6 s;
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-ms-transform: scale(0.85);
transform: scale(0.85);
}
/* кнопка закриття при наведенні */.close:hover:after {
border-color: #fff;
color: #fff;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/* варіанти фонвой заливки модального блоку */.green {
background: #388e3c!important;
}
.cyan {
background: #0097a7!important;
}
.teal {
background: #00796b!important;
}
/* двіжуха при появі блоків з вмістом */@-moz-keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1
}
}
@-webkit-keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1
}
}

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

Завантажити Вихідні Коди

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

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