Как сделать стопроцентно адаптивное модальное окно, которое к тому же выводилось строго по центру и одинаково хорошо смотрелось на различных типах экранов пользовательских устройств? Вопрос конечно интересный, а процесс реализации и вовсе увлекательнейший. Конечно, макет модального окна, о котором сегодня пойдёт речь, скорее резиновый, так как адаптивность, в навороченных кругах, подразумевает наличие, прописных мета-тегов для мобильных устройств, медиа-запросов в css и прочими стандартами.
<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>Заголовок модального окна> <div class="pl-left"> <img src="http://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: 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; }