Что такое модальные окна и как их эффективно использовать
2026-02-21 12:11 Diff
https://skillbox.ru/media/code/chto-takoe-modalnye-okna-i-kak-ikh-effektivno-ispolzovat/

#статьи

  • 30 май 2023
  • 0

Что такое модальные окна и как их эффективно использовать

Просто и понятно об окнах, открывающих миру ваш контент.

Иллюстрация: Оля Ежак для Skillbox Media

Студент второго курса бакалавриата «Веб-разработка» в РАНХиГС, дизайнер интерфейсов в Qrver Developers. Любит улучшать UX и разбираться в интерфейсах.

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

Сегодня мы поговорим об одном из самых интересных инструментов — модальных окнах — и разберём, как сделать их максимально полезными.

Всё, что нужно знать о модальных окнах

Модальное окно, или поп-ап, — окно, которое появляется на сайте поверх других документов и окон и делает весь находящийся под ним контент недоступным до тех пор, пока вы с ним не провзаимодействуете.

Простейший пример модального окна:

Типичное модальное окно
Скриншот: личный архив Сергея Садовского

Как правило, структура поп-апа такая:

  • Заголовок, который поясняет, что это за модальное окно (допустим, лид-магнит или уведомление о том, что определённая информация может быть удалена).
  • Кнопки для взаимодействия (например, крестик, чтобы скрыть поп-ап, или любые другие кнопки, которые могут выполнить то или иное действие).
  • Тень, которая помогает создать контраст, чтобы поп-ап был виден на фоне страницы.

Вот несколько самых очевидных направлений.

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

Важные предупреждения. Модальные окна могут сообщать пользователю о том, что он, например, собирается удалить товары из корзины или переместить в корзину файлы на своём компьютере. Так они помогают не сделать что-то случайно. Например, человек листает корзину и случайно задевает кнопку «Очистить». Если поп-апа нет, товары просто пропадут, человек разозлится и уйдёт из интернет-магазина, не совер��ив покупку.

Быстрый доступ к корзине. Эта практика полезна в e-commerce. Например, покупатель хочет быстро посмотреть, что у него в корзине и на какую сумму. Некоторые интернет-магазины предлагают перейти для этого на отдельную страницу, тем самым уводя пользователя из каталога. Это может сбить с толку. Лучше, когда поп-ап появляется сбоку и в нём видна вся информация.

Однако всё хорошо в меру. Вот случаи, когда использование поп-апов скорее навредит вашему проекту:

  • Спам. Модальные окна, которые начинают бомбардировать пользователя всякой ненужной рекламой уже через две секунды после того, как он зашёл на сайт.
  • Вред работе других приложений. Нечасто, но бывает и так, что всплывающий поп-ап мешает человеку работать, а иногда и вовсе сводит на нет результаты многочасового труда. Например, многих пользователей Windows 3.x, 95 и 98 жутко бесили модальные окна прямо поверх рабочего стола. В Windows NT и последующих версиях этот баг убрали.
  • Незаметные поп-апы. Этим грешат некоторые open-source-приложения. Возможно, такое случалось и с вами: допустим, открыта у вас пара десятков одинаковых приложений, и вдруг в одном из них всплывает предупреждающее модальное окно. Приходится потратить несколько минут, открывая одно окно за другим и пытаясь разобраться, что же случилось и почему всё зависло.

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

Это первое, о чём стоит помнить. Мы уже поняли, что поп-апы — важный элемент интерфейса, который помогает пользователю. Именно поэтому важно сделать его удобным для мобильных устройств: по статистике, именно с них на сайты заходят более 70% всех пользователей интернета.

Кросс-браузерность (англ. cross-browser compatibility) означает, что веб-сайт или веб-приложение отображается и работает одинаково хорошо в различных веб-браузерах. При создании модальных окон могут возникнуть трудности с их корректным отображением или работоспособностью. Например, в Google Chrome кнопка кликается, а в Safari она не нажимается.

Чтобы избежать подобных казусов, стоит проводить тестирование в разных браузерах и исправлять ошибки, если таковые появятся. Тут важно гуглить ту или иную проблему, которая возникла у вас. Вы с большой долей вероятности сможете найти решение своей проблемы. Однако можно упростить себе жизнь и использовать фреймворки, например тот же Bootstrap. В них разработчики учли большинство нюансов за нас, и мы просто можем использовать готовые решения. Однако можно и не брать заготовки, а просто подглядывать в решения других разработчиков и делать всё самому :)

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

Важно помнить о том, что пользователь не хочет думать. Ему будет проще, если мы сделаем всё для того, чтобы когнитивная нагрузка была сведена к минимуму.

Посмотрим на эту картинку. Здесь информация легко считывается. Сразу понятно, чего от нас хотят в этом окошке.

Изображение: Skillbox Media

Чтобы ваши модальные окна, да и в целом любые элементы интерфейса, выглядели аккуратно, желательно досконально изучить гайдлайны (документацию) по созданию тех или иных компонентов интерфейса. Это упростит жизнь не только вам, но и вашим пользователям. Советуем обратить внимание на документацию от «Контура». Помогает упростить как создание дизайна, так и вёрстку. К слову, может, у вас появится желание создать собственную документацию, в которой вы учтёте то, что забыли другие :) Это очень хорошая практика, так как вы сможете прокачать навык написания собственных гайдлайнов по проекту.

Обсудили нюансы, теперь поговорим о том, как сделать модальные окна полезными и для бизнеса, и для пользователя. А также о том, как их создавать, используя базовые возможности HTML, CSS и JavaScript.

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

Нам не обязательно использовать теги HTML и прочие, так как это всего лишь пример реализации.

Для начала создадим контейнер для позиционирования элементов интерфейса на экране.

Затем сделаем div, в который обернём заголовок страницы и кнопку, открывающую поп-ап. Наконец, применим стили, использовав class и id.

В коде эта последовательность действий будет выглядеть так:

<div id="overlay"></div> <div class="container"> <div class="about"> <h1 class="headline"> Поп-ап для удаления товаров из корзины </h1> <button id="delete-btn"> Удалить все товары из корзины </button> </div>

Сверстаем сам поп-ап, который будет появляться при нажатии на кнопку. Мы задали классы, которые скроют его до того, как пользователь нажмёт на кнопку «Удалить все товары из корзины». О том, что будет показывать поп-ап при нажатии, поговорим позже.

<div id="popup" class="popup"> <div class="popup__content"> <h2 class="popup__title"> Вы действительно хотите удалить все товары из корзины? </h2> <div class="btn-container"> <button id="no-btn" class="popup__button"> Нет </button> <button id="yes-btn" class="popup__button"> Да </button> </div> </div> </div>

Теперь делаем окошко, которое будет появляться после клика на кнопку «Да»:

<div id="success" class="popup"> <div class="popup__content"> <h2 class="popup__title"> Товары из корзины были удалены </h2> <button id="buy-btn" class="popup__button"> Вернуться в каталог </button> </div> </div> </div>

Приведём в порядок страничку: подключим шрифты, добавим цвета, приведём кнопки к нормальному виду и расставим всё на свои места. А то, что нам пока не нужно, скроем.

Подключим шрифт с Google Fonts и зададим настройки фона тегу body:

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap"); body { background: linear-gradient( 137.09deg, #fabc32 2.19%, #f69b31 51.57%, #f16d30 97.86% ); font-family: "Montserrat", sans-serif; }

Зададим стили контейнеру, чтобы всё хорошо отображалось:

.container { max-width: 1200px; margin: 0 auto; }

Зададим стили для заголовка страницы:

.about { color: #fff; display: flex; flex-direction: column; }

Аналогично стилизуем кнопку:

button { padding: 15px 20px; border-radius: 5px; border: none; background-color: #1c87c9; color: #fff; font-size: 16px; cursor: pointer; font-family: "Montserrat", sans-serif; }

И приводим модальное окно к нормальному виду:

.popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 5px; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); z-index: 9999; display: none; } .popup__content { display: flex; flex-direction: column; align-items: center; } .popup__title { margin: 0 0 20px; font-size: 18px; font-weight: 600; text-align: center; } .popup__button { padding: 15px 60px; border-radius: 5px; border: none; background-color: #1c87c9; color: #fff; font-size: 16px; cursor: pointer; }

Здесь остановимся подробнее. #overlay содержит в себе стили нашего заднего фона. Он нам нужен, чтобы чётко отделить поп-ап от страницы сайта. #overlay.show задаёт свойство display block, чтобы отобразить фон. Этот класс мы можем присваивать через JavaScript-код. Рассмотрим это ниже.

#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9998; display: none; } #overlay.show { display: block; }

Зададим стили для кнопки «Да», которая, по нашему замыслу, удаляет товар из корзины:

#yes-btn { background-color: transparent; color: #1c87c9; border: 1px solid #1c87c9; border-radius: 5px; } #yes-btn:hover { background-color: #1c87c9; color: #fff; }

Именно благодаря JS вся наша задумка с модальным окном становится реальной. Как говорили выше: всё, что нужно, оставим, а ненужное — скроем.

В коде оставлены комментарии для каждой строчки, а также добавлены пояснения, как работает поп-ап.

Обработчики событий применяются для реакции на действия пользователя. При клике на кнопку «Удалить все товары из корзины» модальное окно отображается на странице. Кнопка «Нет» закрывает модальное окно, а кнопка «Да» закрывает модальное окно и отображает сообщение об успешном удалении товаров. Кнопка «Перейти в каталог» скрывает сообщение об успешном удалении товаров. Если бы мы использовали этот поп-ап в реальном интернет-магазине, можно было бы после удаления товаров из корзины сразу переводить пользователя обратно в каталог.

Объявим переменные, в которые запишем наши id для дальнейшей манипуляции над ними. В статье мы не будем подробно разбирать каждую строчку кода. Вы можете почитать исходник кода с комментариями на CodePen, ссылка на который будет в конце статьи.

const deleteBtn = document.getElementById("delete-btn"); const popup = document.getElementById("popup"); const noBtn = document.getElementById("no-btn"); const yesBtn = document.getElementById("yes-btn"); const success = document.getElementById("success"); const buyBtn = document.getElementById("buy-btn"); const overlay = document.getElementById("overlay");

Напишем код для управления нашими id.

При клике на кнопку deleteBtn устанавливаем CSS-свойство display элемента с id popup на block, чтобы показать поп-ап. Добавляем класс show к элементу с id overlay и добиваемся таким образом эффекта затемнения:

deleteBtn.addEventListener("click", () => { popup.style.display = "block"; overlay.classList.add("show"); });

Устанавливаем обработчик событий по кнопке с id noBtn: при клике на неё CSS-свойство display элемента с id popup должно меняться на none, чтобы скрыть поп-ап. Точно так же удаляем класс show у элемента с id overlay, чтобы скрыть затемнение:

noBtn.addEventListener("click", () => { popup.style.display = "none"; overlay.classList.remove("show"); });

Проделываем аналогичные манипуляции с обработчиком событий на клик по кнопке с индентификатором yesBtn. При клике на неё устанавливаем CSS-свойство display элемента с id popup на none, чтобы скрыть поп-ап.

CSS-свойство display элемента с id success меняем на block, чтобы показать сообщение об успешном удалении товаров. Добавляем класс show к элементу с идентификатором overlay, чтобы показать затемнение:

yesBtn.addEventListener("click", () => { popup.style.display = "none"; success.style.display = "block"; overlay.classList.add("show"); });

Наконец, добавляем обработчик событий на клик по кнопке с id buyBtn: устанавливаем CSS-свойство display элемента с id success на none, чтобы скрыть сообщение об успешном удалении товаров. Снимаем класс show у элемента с id overlay, чтобы скрыть затемнение:

buyBtn.addEventListener("click", () => { success.style.display = "none"; overlay.classList.remove("show"); });

Бинго!

Используя модальные окна, вы можете сделать свой проект лучше и решить ваши конкретные прикладные задачи. Можно менять дизайн, добавлять больше контента — особых ограничений в техническом плане нет.

Однако не все поп-апы одинаково полезны: если переусердствовать, проект можно с такой же эффективностью и загубить. В общем, как говорил средневековый медик Теофаст Бомбаст Парацельс фон Гогенгейм, всё лекарство, и всё яд — то и другое определяет доза. Творите, дерзайте, но соблюдайте меру! ?

Ссылка на исходники

Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе