понедельник, 6 февраля 2017 г.

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

Как сделать стопроцентно адаптивное , которое к тому же выводилось строго по центру и одинаково хорошо, без видимой ломки, смотрелось на различных типах экранов пользовательских устройств?
Вопрос конечно интересный, а процесс реализации и вовсе увлекательнейший. Конечно, макет модального окна, о котором сегодня пойдёт речь, скорее резиновый, так как адаптивность, в навороченных кругах, подразумевает наличие, прописных мета-тегов для мобильных устройств, медиа-запросов в css и прочие установленные «трендованными буржуинами» и еже сними, стандартами.
К теме создания модальных окон, я возвращался много раз, описывал способы с использованием jQuery и исключительно на чистом . В представленном сегодня примере объединил некоторые концепции и получилось то, что получилось. Не стоит принимать этот метод, как руководство к действию, скорее это, рабочий материал, поиски оптимальных решений.
Смотрите живой пример, а далее разберём немного по-подробнее составляющие.
Адаптивное модальное окно на чистом CSS
Как видите, при активации, модальное окно появляется строго по центру и не меняет своего положения при изменении размеров экрана просмотра, плавно масштабируется само окно. Для абсолютного центрирования модального блока метод с применением свойства display: table-cell;, на мой взгляд, это один из самых лучших и простых способов, о котором подробно описано в статье на 456bereastreet.com. Есть у этого решения маленький недостаток — дополнительная разметка, необходимо целых ))) три элемента. В разметке Html в итоге, получаем следующую картину:

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="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, при использовании миниатюр или видео, добавляется ещё один блок. Ключевые свойства отвечающие за центрирование окна, оставляем как есть, экспериментируйте с формированием, как самого модального блока, так и внутренних элементов:

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

Все ключевые, функциональные элементы, используемые в формировании модального блока с содержанием, мы рассмотрели, мне остаётся показать весь код 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;
}

На этом всё. Не буду утверждать, что всё без ошибок, тестировал во многих браузерах, про IE8 и ниже, сразу надо забыть, это что касается модального окна, центрирование и адаптивность элементов кроссбраузерные, вёрстка не едет при большом количестве текста в блоке, высота изменяемая.
Если что-то пропустил или же обнаружится ошибка, пишите в комментариях. Исходники упаковал в архив и выложил в облако на Яндекс, при возникшем вдруг желании, всегда можете их скачать.

0 коммент.:

Отправить комментарий