Вопрос конечно интересный, а процесс реализации и вовсе увлекательнейший. Конечно, макет модального окна, о котором сегодня пойдёт речь, скорее резиновый, так как адаптивность, в навороченных кругах, подразумевает наличие, прописных мета-тегов для мобильных устройств, медиа-запросов в css и прочие установленные «трендованными буржуинами» и еже сними, стандартами.
К теме создания модальных окон, я возвращался много раз, описывал способы с использованием jQuery и исключительно на чистом CSS3. В представленном сегодня примере объединил некоторые концепции и получилось то, что получилось. Не стоит принимать этот метод, как руководство к действию, скорее это, рабочий материал, поиски оптимальных решений.
Пример:
Шаг 1) добавить HTML:
<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, при использовании миниатюр или видео, добавляется ещё один блок. Ключевые свойства отвечающие за центрирование окна, оставляем как есть, экспериментируйте с формированием, как самого модального блока, так и внутренних элементов:
Шаг 2) добавить 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 Комментарии