Позиционирование модального окна

Модальные окна — это важный элемент интерфейса, который часто используется для отображения дополнительной информации, форм или уведомлений. В этой статье мы разберем, как создавать и позиционировать модальные окна с помощью HTML и CSS, используя Grid. Также рассмотрим важные моменты, такие как отключение скролла у body при открытии модального окна.

Для начала создадим базовую структуру модального окна. Обычно модальное окно состоит из двух основных частей: фон (оверлей) и само окно.

<div class="modal-overlay">
  <div class="modal">
    <h2>Модальное окно</h2>
    <p>Это пример модального окна.</p>
    <button class="close-button" type="button">Закрыть</button>
  </div>
</div>

Теоретически, можно обойтись и без обертки с оверлеем, заменив её на box-shadow или псевдоэлемент, но остановимся на классическом варианте.

Обратите внимание, что кнопка закрытия окна в коде идёт после содержимого. Иначе при перемещении по странице с помощью клавиатуры, первое куда попадёт таб, будет кнопка закрытия окна. Но скорее всего владельцу сайта, больше хочется, чтобы посетитель заполнил форму.

Позиционирование модального окна

Для позиционирования модального окна по центру экрана можно использовать несколько подходов. Рассмотрим два из них: с помощью Grid и с помощью абсолютного позиционирования.

.modal-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center; /* Центрирование по горизонтали и вертикали */
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

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

grid-template-columns: 1fr min-content 1fr;
grid-template-rows: 1fr min-content 1fr;

Это никак не помешает содержимому прилипнуть к краям, поэтому меняем 1fr на minmax(20px, 1fr). То есть, если блок с содержимым небольшой, то он центрируется, как обычно. Если же он захочет прилипнуть к краям, то не сможет этого сделать и останутся буферные отступы в моём случае по 20px.

Также позаботимся о том, чтобы если высота содержимого окажется больше вьюпорта, то включалась полоса прокрутки у оверлея.

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  display: grid;
  /* так, если нужны минимальные отступы по краям */
  grid-template-columns: minmax(20px, 1fr) min-content minmax(20px, 1fr);
  grid-template-rows: minmax(20px, 1fr) min-content minmax(20px, 1fr);
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}

See the pen (@Websitio) on CodePen.

Не обязательно вешать прокрутку на оверлей. Можно и на блок с содержимым. В таком случае стоит стилизовать полосу прокрутки на более аккуратную и, возможно, применить какие-нибудь ещё симпатичные эффекты. Например, переход в прозрачность.

See the pen (@Websitio) on CodePen.