Как сделать стопроцентно адаптивное модальное окно на чистом CSS, которое к тому же выводилось строго по центру, и одинаково хорошо, без видимой ломки, смотрелось на различных типах экранов пользовательских устройств?
Вопрос конечно интересный, а процесс реализации и вовсе увлекательнейший. Конечно, макет модального окна, о котором сегодня пойдёт речь, скорее резиновый, так как адаптивность, в навороченных кругах, подразумевает наличие, прописных мета-тегов для мобильных устройств, медиа-запросов в css и прочие установленные «трендованными буржуинами» и еже сними, стандартами.
К теме создания модальных окон, я возвращался много раз, описывал способы с использованием jQuery и исключительно на чистом CSS3. В представленном сегодня примере объединил некоторые концепции и получилось то, что получилось. Не стоит принимать этот метод, как руководство к действию, скорее это, рабочий материал, поиски оптимальных решений.
<div class="dm-overlay" id="win1">
<div class="dm-table">
<div class="dm-cell">
<div class="dm-modal">
<a href="#close" class="close"></a>
<h3>Заголовок модального окна</h3>
<div class="pl-left">
<img src="https://lorempixel.com/320/320/people/some-text">
</div>
<p>Текстовое содержание....</p>
</div>
</div>
</div>
</div>
Вызывается окно ударом по ссылке, адрес которой, должен соответствовать идентификатору того или иного модального блока. Объектом для ссылки может служить практически любой элемент, в примере использовал в виде более-менее оформленной кнопки:
<a href="#win1" class="btn">Открыть окно 1</a>
Базовым контейнером, в который размещаем модальный блок с содержанием, является слой затемнения, чаще всего я выношу фон в отдельный div, в данном же случае, решил объединить в единую конструкцию все элементы. Тесты показали, что всё работает нормально, только вот с реализацией закрытия окна по клику вне зоны блока(по слою затемнения), возникают трудности.
Весь макет состоит из четырёх div-контейнеров с последовательной вложенностью, под формирование которых выделены отдельные классы в 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.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
}
}
Отправить комментарий
0 Комментарии