Адаптивное модальное окно строго по центру - «Самоучитель CSS»

Как сделать стопроцентно адаптивное модальное окно, которое к тому же выводилось строго по центру и одинаково хорошо, без видимой ломки, смотрелось на различных типах экранов пользовательских устройств?

Вопрос конечно интересный, а процесс реализации и вовсе увлекательнейший. Конечно, макет модального окна, о котором сегодня пойдёт речь, скорее резиновый, так как адаптивность, в навороченных кругах, подразумевает наличие, прописных мета-тегов для мобильных устройств, медиа-запросов в css и прочие установленные «трендованными буржуинами» и еже сними, стандартами.

К теме создания модальных окон, я возвращался много раз, описывал способы с использованием jQuery и исключительно на чистом CSS3. В представленном сегодня примере объединил некоторые концепции и получилось то, что получилось. Не стоит принимать этот метод, как руководство к действию, скорее это, рабочий материал, поиски оптимальных решений.

Смотрите живой пример, а далее разберём немного по-подробнее составляющие.

Как видите, при активации, модальное окно появляется строго по центру и не меняет своего положения при изменении размеров экрана просмотра, плавно масштабируется само окно. Для абсолютного центрирования модального блока метод с применением свойства display: table-cell;, на мой взгляд, это один из самых лучших и простых способов, о котором подробно описано в статье на <!--noindex-->456bereastreet.com<!--/noindex-->. Есть у этого решения маленький недостаток — дополнительная разметка, необходимо целых ))) три элемента. В разметке Html в итоге, получаем следующую картину:

Html разметка

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




Текстовое содержание....

Вызывается окно ударом по ссылке, адрес которой, должен соответствовать идентификатору того или иного модального блока. Объектом для ссылки может служить практически любой элемент, в примере использовал в виде более-менее оформленной кнопки:

Открыть окно 1

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

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

CSS

/* слой затемнения */
.dm-overlay {
position: absolute;
top: 0;
left: 0;
display: none;/* скрыт изначально */
overflow: auto;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.65);
}
/* активируем слой затемнения и модальное окно */
.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 }
}

Часто модальные окна используют для вывода, не только текстовых сообщений и различных форм, но и для демонстрации изображений, знаменитый lightbox и т.д. Так же, в купе с текстом органично смотрятся в всплывающих окошках, встроенные в текст миниатюры картинок. Постарался предусмотреть и такой вариант применения, обозначив ряд выделенных классов в CSS, содержащих свойства формирующие вывод изображений внутри окна.

Для миниатюр определил возможность размещения, как справа, так и слева от текста, с шириной в 25%, а масштабной картинке назначил ширину в width: 100%; от родительского контейнера, тем самым обеспечив возможность пропорционального изменения, при просмотре на экранах различных пользовательских устройств. О том как сделать картинки адаптивными, подробно рассказывал ранее, именно этот метод и использовал.

/* изображения в модальном окне */
.dm-modal thumb {
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;
}

Так и не найдя корректного, всех и вся удовлетворяющего способа остановки проигрывания видео при закрытии модального окна, собранного и работающего на 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%; 
}

/* Стили модального окна и содержания */
.dm-overlay {/* слой затемнения */
position: absolute;
top: 0;
left: 0;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.65);
}
/* активируем модальное окно */
.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-modal thumb {
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.6s;
-moz-transition: all 0.6s;
transition: all 0.6s;
-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 и поделитесь ссылкой на запись в своих соц-сетях: