Чем отличается модальное окно от попапа

Модальное окно Modal

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

Раньше в Контуре этот компонент назывался Лайтбоксом, но мы переименовали его, чтобы не было разночтений. В профессиональном сообществе «модальное окно» более распространенный и устоявшийся термин.

Когда использовать

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

Не используйте модальное окно для больших форм. Большие формы — это формы которые не помещаются в два экрана монитора. Если важно оставить контекст страницы для такой формы, возможно вам подойдет сайдпейдж.

Описание работы

Модальное окно появляется поверх страницы, затемняя ее. Это помогает сфокусировать внимание пользователя на конкретных действиях, не теряя при этом общий контекст.

Модальное окно может состоять из:

«Шапки» — заголовка и крестика,
контент-зоны,
«подвала» — или «терминальной зоны» с кнопками основных действий.

Ни один из этих пунктов, кроме крестика, не является обязательным.

Заголовок

Если модальное окно предназначено для выполнения одной конкретной задачи, она должна быть отражена в заголовке. Заголовок должен быть кратким (1-3 слова) и являться названием процесса или объекта.

Если модальное окно носит информационный характер, заголовок должен емко передавать суть сообщения:

В модальных окнах с подтверждением заголовком является вопрос:

Действия

Чаще всего в модальном окне есть минимум два терминальных (закрывающих окно) действия:

Черная кнопка — действие по умолчанию, сохраняет проделанную работу или подтверждает вызванную ранее команду. Такую кнопку нельзя называть «ОК».
Кнопка отмены — закрывает модальное окно не выполняя основное действие, называется «Отменить», не должна называться «Отмена».

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

Закрытие модального окна

В правом верхнем углу модального окна всегда должна быть кнопка закрытия в виде крестика. Действие кнопки аналогично действию ссылки «Отменить». Также модальное окно должно закрываться по нажатию клавиши Esc на клавиатуре.

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

Модальные окна, несущие чисто информационную функцию, могут закрываться при клике за пределами окна.

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

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

Размер и расположение

По горизонтали модальное окно позиционируется по центру. По вертикали — по центру и на 10% смещенным к верхней части окна браузера.

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

Размер модального окна должен соответствовать его содержимому — внутри окна не должно быть пустых областей.

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

Например, если внутри длинный список — модальное окно должно открываться на максимально возможную высоту, а скролл работать как описано ниже. Если интерактивная карта — максимальную высоту и ширину.

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

Прокрутка

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

Если высота контента внутри модального окна больше высоты окна браузера, окно открывается на всю высоту окна браузера и позиционируется с отступом 40 px от верхнего края страницы. Полоса прокрутки должна появляться у всей страницы, а не внутри модального окна. Контент страницы под затемнением не должен скроллиться.

Во время прокрутки модальное окно занимает всю высоту окна без отступов, а после прокрутки до нижнего края — позиционируется с отступом 40 px от нижнего края страницы.

Залипающие панели

Если важно чтобы в любом положении прокрутки были доступны элементы управления модальным окном в футере, или был виден заголовок, заголовок и футер могут залипать. При этом окно так же открывается с отступом от верхнего края окна браузера, и прокручивается до появления отступа снизу.

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

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

Наложение модальных окон

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

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

Мини-модалка

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

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

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

В некоторых случаях полезно красить иконку.

Фокус и работа с клавиатурой

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

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

При открытом модальном окне нажатие Tab не переводит фокус на элементы страницы, фокус переходит только по элементам модального окна включая крестик.

Клавиша Esc закрывает модальное окно.

Дизайн, размеры и отступы

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

Дополнительные кнопки и ссылки в терминальной плашке:

Модальное окно без терминальной плашки:

Нельзя использовать модальное окно с кнопками основных действий не отделенные чертой (без терминальной плашки), если в нем присутствуют поля не выровненные по левому краю, или текст выровненный по центру:

Модальное окно без заголовка:

Если модальное окно не содержит контента, не следует использовать терминальную плашку:

Информационное модальное окно — окно без кнопок:

Модальные окна / popup

Продолжая серию статей «для начинающих», хочу рассказать про верстку модальных окон.

На всякий случай поясню, что под модальными (popup) окнами понимаются слои, которыенакладываются на все остальные и требуют какого-либо действия от пользователя — что-то ввести, что-то подтвердить или отклонить и т.д. Тоесть функционально это либо «отдельное окно» внутри основного окна или alert\confirm окно.

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

В общем виде html-код страницы с popup_ом будет иметь вид:

popup

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

Эти проблемы особенно актуальны пр отображении окна на экране смартфона, поэому предлагаю следующее решение: мы будем фиксировать не наше модальное окно, а блок со всем содержимым сайта, а модальное окно будет позиционировано абсолютно:

/*Затемнение */ .overflow < background: rgba(0, 0, 0, 0.7); position:fixed; top: 0px;bottom: 0px; left: 0px;right: 0px; z-index:100; display:none; >/* модальное окно */ .popup < position:absolute; z-index:101; background: #ffffff; width: 600px; min-height: 300px; margin-left: -300px; top: 10%; left: 50%; display:none; >.popup .close < position:absolute; top: 10px; right: 10px; display:block; width: 17px; height: 17px; opacity: 0.5; background: url(../img/close.png) no-repeat center; -webkit-transition:opacity 0.5s; -moz-transition:opacity 0.5s; transition:opacity 0.5s; >.popup .close:hover

А теперь давайте приступим к обработке событий открытия и закрытия нашего окна:

var win_top = 0; $(document).ready(function()< // открываем модальное окно при клике по контенту $('#list').click(function()< popup_open('#myPopup'); >) // открываем модальное окно сразу при загрузки страницы popup_open('#myPopup'); // Добавляем обработчик закрытия модального окна $(document).on('click', '.popup .close, .overflow', function()< popup_close() return false; >) >) function popup_open(selector)< if (selector.length)< win_top = $(window).scrollTop(); $('#list').css(< 'position' : 'fixed', 'left' : '0', 'right' : '0', 'top' : '0', // Добавляем смещение, чтобы на фоне была именно та часть, что просмаривал пользователь 'margin-top': '-'+win_top+'px' >) $('.overflow,'+selector).fadeIn(); > > function popup_close()< $('.overflow, .popup').hide(); $('#list').css(< 'position' : 'static', 'margin-top': '0px' >) // Возвращаем скролл на место $(window).scrollTop(win_top); >

Здесь в качестве параметра передается селектор (id) попапа. Такой подход удобен, если на странице есть несколько попапов, которые вызываются кликом по ссылкам. тогда в атрибуте href ссылки можно прописать id блока, который нужно открыть в виде якоря:
href=»#myPopup» и при обработки клика смотреть значение данного атрибута

var > И остался последний штрих - мобильная адаптация нашего модального окна. Здесь все совсем просто - при достижении определенной ширины меняем ему выравнивание и даем динамически расчитывать размеры:

@media screen and (max-width: 650px) < .popup< width: auto; margin-left: 0px; top: 40px; left: 10px; right: 10px; >>

адаптивная верстка,
копилка идей,
jQuery,
для начинающих,

Чем отличаются модальные окна от pop-up’ов

1. Модальное окно — это окно, которое блокирует работу пользователя с родительским приложением до тех пор, пока это окно не закроют. К этой категории относятся современные лайтбоксы (например, просмотр фоток в фб или вк) и древние модальные окна, вызываемые командами alert, prompt и confirm, которые мы чаще всего называем алертами. Проблема алертов в том, что они перекрывают возможность работы не только с текущей вкладкой, но и со всем браузером до тех пор, пока их не закроешь.

2. Pop-up — всплывающее окно. Раньше, когда вкладок в браузерах не было, некоторые страницы открывались в новых окнах. Чаще всего этим злоупотребляли создатели баннеров. Кликнешь по какому-нибудь элементу и у тебя весь рабочий стол в окнах разного размера. А ещё были злостные варианты открытия pop-up’а за границей экрана, чтобы усложнить задачу по его поиску и закрытию. Соответственно, такие окна делились на pop-up’ы, которые появлялись поверх других окон и pop-under’ы, которые, соответственно открывались под другими окнами. Сейчас с pop-up’ами борются сами браузеры и мы их встречаем всё меньше.

Пока писал, прям испытал ностальгические чувства.

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

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

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

Сергей Садовский

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

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

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

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

Что это такое
Преимущества
Недостатки
Особенности создания
Как сделать модальное окно на 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"); >);

Итоги

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

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

Читайте также:

HTML, CSS и веб-стандарты: возможности, ошибки разработчиков и неизвестные фичи
«Прошёл модуль курса и начал рассылать резюме»: музыкант, который стал питонистом
Пишем десктоп-приложение на Python с помощью Tkinter

Уникальное бесплатное предложение, которое несёт пользу потенциальным клиентам. Например, купон, подарок, скидка и тому подобное.