Модальное окно на чистом CSS

Всем привет! В этом небольшом уроке мы создадим простое, но мощное по возможностям модальное окно на чистом CSS. И заодно повторим (а для кого и откроем) такую полезную вещь как flexbox. При этом мы будем создавать не просто модальное окно, которое открывается по клику, а которое позиционируется точно по центру экрана. Когда-то давно такое можно было проделать только с помощью javascript, но время идёт и теперь такое можно сделать с помощью буквально 4 строчек кода.

Начнём с html-кода: разметим ссылку-кнопку, которая будет открывать модальное окно и само окно:

<a href="#ModalWindow">Открыть модальное окно</a>
    
<div id="ModalWindow" class="Modal">
    <div class="Modal_Body">
        <p>Контент внутри окна</p>
    </div>
    <a href="#" class="ModalFull"></a>
</div>

Всё это модальное окно состоит как бы из двух слоёв — первый слой, который имеет класс ModalWindow,  затемняет всё пространство вокруг модального окна и будет выравнивать содержание окна по центру экрана. Второй слой — класса Modal_Body — содержит непосредственно сам контент модального окна.

Теперь создадим CSS-код для этой разметки:

.Modal {
    position: fixed;
    display: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: rgba(0,0,0,0.7);
    pointer-events: none;
}
.Modal:target {
    display: flex;
    pointer-events: auto;
} 
.Modal_Body {
    position: relative;
    z-index: 2;
    display: block;
    margin: auto;
    padding: 15px;
    background: #FFF;
}
.ModalFull {
  position: absolute;
  display: block;
  z-index: 0;
  width: 100%;
  height: 100%;
}

Посмотрим сейчас на работу модального окна и разберёмся с тем, как он работает.

Как мы видим, при нажатии на «Открыть модальное окно» всё окно затеняется, а ровно по центру появляется белое модальное окно. На этом пока остановимся и посвятим себя теории.

Поскольку мы договорились не использовать javascript и не можем с помощью негоотслеживать нажатия на элементы, мы можем легко это сделать с помощью css-псевдокласса и якорной ссылки с хешем (для указания элемента на данной странице) и id cо значением, обязательно равным указателю в ссылке. Посмотрите на наш пример: href ссылки и id основного контейнера модального окна имеют одно и то же значение — ModalWindow. Это важно, поскольку браузер должен понимать, какие элементы будут взаимодействовать друг с другом.

В нашем случае общий контейнер модального окна скрыт и, соответственно, скрыто всё содержание модального окна. Но при нажатии на ссылку элемент получает псевдокласс :target и соответственно появляется. Посмотрите в css-код — свойство display меняется с none на flex. Заметьте, именно flex, поскольку с помощью него мы можем выровнить Modal_Body ровно по центру экрана. Все остальные стили мы прописали для него сразу.

Кстати, если вы не совсем поняли, как его так расплющило по всей поверхности экрана, рассказываю — всё дело в следующих 4-х строчках:

top: 0;
right: 0;
bottom: 0;
left: 0;

Мы указали, что он как-бы должен быть в нулевом пикселе справа, слева, сверху и снизу одновременно. Вместо этого можно использовать, например, такую констукцию:

width: 100%;
height: 100vh;

Здесь мы указываем ширину, равную 100% экрана, а вот высоту лучше установить с помощью viewport height — высоты окна браузера. Я же остановлюсь на своём варианте.

Ещё один важный нюанс — это значение свойства z-index у Modal и Modal_Body. Они должны быть обязательно, и у Modal_Body он обязательно должен быть больше по значению по крайней мере на одну единицу, иначе контент модального окна не будет доступен — ссылки и кнопки будет невозможно нажать. А если там будет предусмотрен контент с прокруткой, то это тоже работать не будет, поскольку один элемент будет перекрывать другой.

Продолжим творить свой шедевр. При нажатии модальное окно появляется, но так же просто закрыть мы его не можем. Давайте добавим кнопку для его закрытия:

<div id="ModalWindow" class="Modal">
    <div class="Modal_Body">
        <p>Контент внутри окна</p>
        <a href="#">Закрыть</a>
    </div>
</div>

Собственно, она отменяет :target для нашего модального окна и то просто принимает начальное положение — скрывается с глаз долой. Но с этой ссылкой есть некоторая тонкость — при её нажатии браузер попытается найти такой элемент, но потерпит фиаско, и промотает страницу к самому началу. Такое поведение — одно из небольших минусов такого подхода к изготовлению модальных окон, но и с ним можно справиться.

Для этого атрибут href у ссылки мы меняем с «#» на «#ModalWindowClose», а у ссылки-кнопки, которая открывала окно, дописываем атрибут id c таким же значением. Можно использовать и атрибут name, но в HTML5 для определения якоря лучше и требуется указывать атрибут id.

<a href="#ModalWindow" id="ModalWindowClose">Открыть модальное окно</a>

<div id="ModalWindow" class="Modal">
    <div class="Modal_Body">
        <p>Контент внутри окна</p>
        <a href="#ModalWindowClose">Закрыть</a>
    </div>
</div>

Теперь при нажатии браузер будет откатываться обратно к кнопке. Ради правды хочу сказать, что этот якорь будет располагаться по верхнему краю экрана. Но, если эта кнопка для открытия находится в header’e или footer’e, то это проблема нивелируется. А если у header’a сделано фиксированное положение, то будет вообще отлично — например, для заказа обратного звонка или предварительного заказа/консультации подойдёт отлично и при закрытии окна.

Вот пример того, что у нас получилось:

Можно ещё немного доработать контейнер Modal_Body — это ограничения по размерам (чтобы он не раздавался в высоту и ширину). И ещё один небольшой нюанс — код с модальным окном рекомендую, по возможности, распологать перед закрывающим тегом </body>.

Вот так можно быстро сделать модальное окно. Этот код, который мы написали, можно использовать в базовом варианте, дописывая нужные стили по необходимости.

Надеюсь, мой урок был для Вас полезен. Доброго Вам времени суток и до новой встречи на Веб-Островах!