Все
Истории
Дизайн
Код
Геймдев
Бизнес
Маркетинг
Управление
Кино
Музыка
Проектная фотография
Развитие
Здоровье
Деньги
Образование
EdTech
Корп. обучение
Блог Skillbox
Глоссарий
Спецпроекты
Профориентация
Что такое модальные окна и как их эффективно использовать
Просто и понятно об окнах, открывающих миру ваш контент.
Поток мыслей кодера безграничен: можно создавать что угодно, лишь бы пользователь решил свою проблему, остался доволен вашим сайтом, а бизнесу ваше решение принесло прибыль.
Сегодня мы поговорим об одном из самых интересных инструментов — модальных окнах — и разберём, как сделать их максимально полезными.
Всё, что нужно знать о модальных окнах
- Что это такое
- Преимущества
- Недостатки
- Особенности создания
- Как сделать модальное окно на HTML, JS и CSS
- Итоги
Что такое модальное окно и из чего оно состоит
Модальное окно, или поп-ап, — окно, которое появляется на сайте поверх других документов и окон и делает весь находящийся под ним контент недоступным до тех пор, пока вы с ним не провзаимодействуете.
Простейший пример модального окна:
Скриншот: личный архив Сергея Садовского
Как правило, структура поп-апа такая:
- Заголовок, который поясняет, что это за модальное окно (допустим, лид-магнит или уведомление о том, что определённая информация может быть удалена).
- Кнопки для взаимодействия (например, крестик, чтобы скрыть поп-ап, или любые другие кнопки, которые могут выполнить то или иное действие).
- Тень, которая помогает создать контраст, чтобы поп-ап был виден на фоне страницы.
Плюсы модальных окон: где и для чего их используют
Вот несколько самых очевидных направлений.
Сбор контактной информации. В поп-апе может быть форма, которая запросит все необходимые данные для обратной связи. Пользователю это удобно тем, что ему не нужно блуждать по всему сайту: всю нужную информацию он может получить одним кликом.
Важные предупреждения. Модальные окна могут сообщать пользователю о том, что он, например, собирается удалить товары из корзины или переместить в корзину файлы на своём компьютере. Так они помогают не сделать что-то случайно. Например, человек листает корзину и случайно задевает кнопку «Очистить». Если поп-апа нет, товары просто пропадут, человек разозлится и уйдёт из интернет-магазина, не совершив покупку.
Быстрый доступ к корзине. Эта практика полезна в e-commerce. Например, покупатель хочет быстро посмотреть, что у него в корзине и на какую сумму. Некоторые интернет-магазины предлагают перейти для этого на отдельную страницу, тем самым уводя пользователя из каталога. Это может сбить с толку. Лучше, когда поп-ап появляется сбоку и в нём видна вся информация.
Минусы модальных окон: для чего использовать их не нужно
Однако всё хорошо в меру. Вот случаи, когда использование поп-апов скорее навредит вашему проекту:
- Спам. Модальные окна, которые начинают бомбардировать пользователя всякой ненужной рекламой уже через две секунды после того, как он зашёл на сайт.
- Вред работе других приложений. Нечасто, но бывает и так, что всплывающий поп-ап мешает человеку работать, а иногда и вовсе сводит на нет результаты многочасового труда. Например, многих пользователей Windows 3.x, 95 и 98 жутко бесили модальные окна прямо поверх рабочего стола. В Windows NT и последующих версиях этот баг убрали.
- Незаметные поп-апы. Этим грешат некоторые open-source-приложения. Возможно, такое случалось и с вами: допустим, открыта у вас пара десятков одинаковых приложений, и вдруг в одном из них всплывает предупреждающее модальное окно. Приходится потратить несколько минут, открывая одно окно за другим и пытаясь разобраться, что же случилось и почему всё зависло.
Какие нюансы есть в создании модальных окон
Как мы знаем, вёрстка — процесс, в котором довольно много подводных камней. Бывает так, что на десктопе всё работает, как и задумывалось, а, например, в мобильной версии сайта уже всё не так интуитивно понятно.
Адаптивность
Это первое, о чём стоит помнить. Мы уже поняли, что поп-апы — важный элемент интерфейса, который помогает пользователю. Именно поэтому важно сделать его удобным для мобильных устройств: по статистике, именно с них на сайты заходят более 70% всех пользователей интернета.
Кросс-браузерность
Кросс-браузерность (англ. cross-browser compatibility) означает, что веб-сайт или веб-приложение отображается и работает одинаково хорошо в различных веб-браузерах. При создании модальных окон могут возникнуть трудности с их корректным отображением или работоспособностью. Например, в Google Chrome кнопка кликается, а в Safari она не нажимается.
Чтобы избежать подобных казусов, стоит проводить тестирование в разных браузерах и исправлять ошибки, если таковые появятся. Тут важно гуглить ту или иную проблему, которая возникла у вас. Вы с большой долей вероятности сможете найти решение своей проблемы. Однако можно упростить себе жизнь и использовать фреймворки, например тот же Bootstrap. В них разработчики учли большинство нюансов за нас, и мы просто можем использовать готовые решения. Однако можно и не брать заготовки, а просто подглядывать в решения других разработчиков и делать всё самому :)
UX/UI (пользовательский опыт и визуал)
Часто можно видеть, как дизайнеры и разработчики не уделяют должного внимания логике и дизайну модального окна как такового. Например, заходишь на сайт, читаешь контент, и тут всплывает жутко неаккуратный поп-ап, на который мало того что смотреть не хочется из-за его неопрятности, так и скрыть его нормально нельзя, потому что верстальщики и дизайнеры забыли это учесть.
Важно помнить о том, что пользователь не хочет думать. Ему будет проще, если мы сделаем всё для того, чтобы когнитивная нагрузка была сведена к минимуму.
Посмотрим на эту картинку. Здесь информация легко считывается. Сразу понятно, чего от нас хотят в этом окошке.
Чтобы ваши модальные окна, да и в целом любые элементы интерфейса, выглядели аккуратно, желательно досконально изучить гайдлайны (документацию) по созданию тех или иных компонентов интерфейса. Это упростит жизнь не только вам, но и вашим пользователям. Советуем обратить внимание на документацию от «Контура». Помогает упростить как создание дизайна, так и вёрстку. К слову, может, у вас появится желание создать собственную документацию, в которой вы учтёте то, что забыли другие :) Это очень хорошая практика, так как вы сможете прокачать навык написания собственных гайдлайнов по проекту.
Обсудили нюансы, теперь поговорим о том, как сделать модальные окна полезными и для бизнеса, и для пользователя. А также о том, как их создавать, используя базовые возможности HTML, CSS и JavaScript.
Как сделать модальное окно на HTML, JS и CSS
Рассмотрим простой поп-ап, который будет предупреждать пользователя о том, что он собирается очистить корзину.
Подготовим разметку
Нам не обязательно использовать теги 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;
}
Напишем код на JavaScript, чтобы оживить поп-ап
Именно благодаря 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");
});
Бинго!
Итоги
Используя модальные окна, вы можете сделать свой проект лучше и решить ваши конкретные прикладные задачи. Можно менять дизайн, добавлять больше контента — особых ограничений в техническом плане нет.
Однако не все поп-апы одинаково полезны: если переусердствовать, проект можно с такой же эффективностью и загубить. В общем, как говорил средневековый медик Теофаст Бомбаст Парацельс фон Гогенгейм, всё лекарство, и всё яд — то и другое определяет доза. Творите, дерзайте, но соблюдайте меру! ?
Ссылка на исходники
