Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <p><a>#статьи</a></p>

2 <ul><li>30 май 2023</li>

3 <li>0</li>

4 </ul><h2>Что такое модальные окна и как их эффективно использовать</h2>

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

6 <p>Иллюстрация: Оля Ежак для Skillbox Media</p>

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

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

9 <p>Сегодня мы поговорим об одном из самых интересных инструментов - модальных окнах - и разберём, как сделать их максимально полезными.</p>

10 <p><strong>Всё, что нужно знать о модальных окнах</strong></p>

11 <ul><li><a>Что это такое</a></li>

12 <li><a>Преимущества</a></li>

13 <li><a>Недостатки</a></li>

14 <li><a>Особенности создания</a></li>

15 <li><a>Как сделать модальное окно на HTML, JS и CSS</a></li>

16 <li><a>Итоги</a></li>

17 </ul><p><strong>Модальное окно, или поп-ап</strong>, - окно, которое появляется на сайте поверх других документов и окон и делает весь находящийся под ним контент недоступным до тех пор, пока вы с ним не провзаимодействуете.</p>

18 <p>Простейший пример модального окна:</p>

19 Типичное модальное окно<em>Скриншот: личный архив Сергея Садовского</em><p>Как правило, структура поп-апа такая:</p>

20 <ul><li>Заголовок, который поясняет, что это за модальное окно (допустим, лид-магнит или уведомление о том, что определённая информация может быть удалена).</li>

21 <li>Кнопки для взаимодействия (например, крестик, чтобы скрыть поп-ап, или любые другие кнопки, которые могут выполнить то или иное действие).</li>

22 <li>Тень, которая помогает создать контраст, чтобы поп-ап был виден на фоне страницы.</li>

23 </ul><p>Вот несколько самых очевидных направлений.</p>

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

25 - <p><strong>Важные предупреждения.</strong>Модальные окна могут сообщать пользователю о том, что он, например, собирается удалить товары из корзины или переместить в корзину файлы на своём компьютере. Так они помогают не сделать что-то случайно. Например, человек листает корзину и случайно задевает кнопку "Очистить". Если поп-апа нет, товары просто пропадут, человек разозлится и уйдёт из интернет-магазина, не совершив покупку.</p>

25 + <p><strong>Важные предупреждения.</strong>Модальные окна могут сообщать пользователю о том, что он, например, собирается удалить товары из корзины или переместить в корзину файлы на своём компьютере. Так они помогают не сделать что-то случайно. Например, человек листает корзину и случайно задевает кнопку "Очистить". Если поп-апа нет, товары просто пропадут, человек разозлится и уйдёт из интернет-магазина, не совер��ив покупку.</p>

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

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

28 <ul><li><strong>Спам.</strong>Модальные окна, которые начинают бомбардировать пользователя всякой ненужной рекламой уже через две секунды после того, как он зашёл на сайт.</li>

29 <li><strong>Вред работе других приложений.</strong>Нечасто, но бывает и так, что всплывающий поп-ап мешает человеку работать, а иногда и вовсе сводит на нет результаты многочасового труда. Например, многих пользователей Windows 3.x, 95 и 98 жутко бесили модальные окна прямо поверх рабочего стола. В Windows NT и последующих версиях этот баг убрали.</li>

30 <li><strong>Незаметные поп-апы.</strong>Этим грешат некоторые open-source-приложения. Возможно, такое случалось и с вами: допустим, открыта у вас пара десятков одинаковых приложений, и вдруг в одном из них всплывает предупреждающее модальное окно. Приходится потратить несколько минут, открывая одно окно за другим и пытаясь разобраться, что же случилось и почему всё зависло.</li>

31 </ul><p>Как мы знаем, вёрстка - процесс, в котором довольно много подводных камней. Бывает так, что на десктопе всё работает, как и задумывалось, а, например, в мобильной версии сайта уже всё не так интуитивно понятно.</p>

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

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

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

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

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

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

38 <em>Изображение: Skillbox Media</em><p>Чтобы ваши модальные окна, да и в целом любые элементы интерфейса, выглядели аккуратно, желательно досконально изучить гайдлайны (документацию) по созданию тех или иных компонентов интерфейса. Это упростит жизнь не только вам, но и вашим пользователям. Советуем обратить внимание на <a>документацию от "Контура"</a>. Помогает упростить как создание дизайна, так и вёрстку. К слову, может, у вас появится желание создать собственную документацию, в которой вы учтёте то, что забыли другие :) Это очень хорошая практика, так как вы сможете прокачать навык написания собственных гайдлайнов по проекту.</p>

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

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

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

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

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

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

45 <div id="overlay"></div> <div class="container"> <div class="about"> <h1 class="headline"> Поп-ап для удаления товаров из корзины </h1> <button id="delete-btn"> Удалить все товары из корзины </button> </div><p>Сверстаем сам поп-ап, который будет появляться при нажатии на кнопку. Мы задали классы, которые скроют его до того, как пользователь нажмёт на кнопку "Удалить все товары из корзины". О том, что будет показывать поп-ап при нажатии, поговорим позже.</p>

46 <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><p>Теперь делаем окошко, которое будет появляться после клика на кнопку "Да":</p>

47 <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><p>Приведём в порядок страничку: подключим шрифты, добавим цвета, приведём кнопки к нормальному виду и расставим всё на свои места. А то, что нам пока не нужно, скроем.</p>

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

49 @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; }<p>Зададим стили контейнеру, чтобы всё хорошо отображалось:</p>

50 .container { max-width: 1200px; margin: 0 auto; }<p>Зададим стили для заголовка страницы:</p>

51 .about { color: #fff; display: flex; flex-direction: column; }<p>Аналогично стилизуем кнопку:</p>

52 button { padding: 15px 20px; border-radius: 5px; border: none; background-color: #1c87c9; color: #fff; font-size: 16px; cursor: pointer; font-family: "Montserrat", sans-serif; }<p>И приводим модальное окно к нормальному виду:</p>

53 .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; }<p>Здесь остановимся подробнее. #overlay содержит в себе стили нашего заднего фона. Он нам нужен, чтобы чётко отделить поп-ап от страницы сайта. #overlay.show задаёт свойство display block, чтобы отобразить фон. Этот класс мы можем присваивать через JavaScript-код. Рассмотрим это ниже.</p>

54 #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; }<p>Зададим стили для кнопки "Да", которая, по нашему замыслу, удаляет товар из корзины:</p>

55 #yes-btn { background-color: transparent; color: #1c87c9; border: 1px solid #1c87c9; border-radius: 5px; } #yes-btn:hover { background-color: #1c87c9; color: #fff; }<p>Именно благодаря JS вся наша задумка с модальным окном становится реальной. Как говорили выше: всё, что нужно, оставим, а ненужное - скроем.</p>

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

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

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

59 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");<p>Напишем код для управления нашими id.</p>

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

61 deleteBtn.addEventListener("click", () => { popup.style.display = "block"; overlay.classList.add("show"); });<p>Устанавливаем обработчик событий по кнопке с id noBtn: при клике на неё CSS-свойство display элемента с id popup должно меняться на none, чтобы скрыть поп-ап. Точно так же удаляем класс show у элемента с id overlay, чтобы скрыть затемнение:</p>

62 noBtn.addEventListener("click", () => { popup.style.display = "none"; overlay.classList.remove("show"); });<p>Проделываем аналогичные манипуляции с обработчиком событий на клик по кнопке с индентификатором yesBtn. При клике на неё устанавливаем CSS-свойство display элемента с id popup на none, чтобы скрыть поп-ап.</p>

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

64 yesBtn.addEventListener("click", () => { popup.style.display = "none"; success.style.display = "block"; overlay.classList.add("show"); });<p>Наконец, добавляем обработчик событий на клик по кнопке с id buyBtn: устанавливаем CSS-свойство display элемента с id success на none, чтобы скрыть сообщение об успешном удалении товаров. Снимаем класс show у элемента с id overlay, чтобы скрыть затемнение:</p>

65 buyBtn.addEventListener("click", () => { success.style.display = "none"; overlay.classList.remove("show"); });<p>Бинго!</p>

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

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

68 <p><a><strong>Ссылка на исходники</strong></a></p>

69 <a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>