Модальные окна CSS – популярный компонент интерфейса большинства современных веб-страниц. Этот элемент может использоваться для вывода разнообразного контента с сайта, рекламы и уведомлений. Он чаще всего создается при помощи JavaScript, но можно обойтись и средствами HTML5/CSS3.
Далее предстоит познакомиться с соответствующим компонентом поближе. Предстоит выяснить, что он собой представляет, какими особенностями обладает, для чего используется. Также вниманию будет представлен пример создания модальных окон. Эта информация пригодится всем веб-разработчикам.
Определение
Модальное окно (или PopUp) – это окно, которое появляется на веб-сайте поверх других документов и окон. Оно делает весь контент, расположенный на странице, недоступным до тех пор, пока пользователь не начнет взаимодействовать с ним.
Такое окно блокирует работу клиента с родительским приложением. Оно напоминает уведомление. Функционирование онлайн-страницы будет восстановлено, как только пользователь закроет изучаемый элемент. Ниже – его наглядный пример.
PopUp при появлении становится единственно активным в пользовательском интерфейсе элементом. Все остальные окна могут выступать только в качестве фона. На пользовательские действия они никак не реагируют.
Принцип функционирования и структура
Pop Up предусматривает следующую структуру:
- Заголовок. Он указывает на то, с каким всплывающим окном будет иметь дело пользователь.
- Кнопки взаимодействия. Они отвечают за выполнение тех или иных действий.
- Тень. Используется для создания контраста на странице. Это необходимо для корректного отображение Pop Up на экране.
Работает Поп Ап так: фон занимает 100 % рабочего пространства сайта или приложения. Он бывает прозрачным или затемненным. Сквозь него может виднеться открытая страница. Это помогает пользователю понять, что информация/контент имеется, но без совершения тех или иных действий доступ к ней ограничен.
Поверх фона появляется диалоговое окно с сообщением и элементами управления. Система будет ожидать пользовательских действий. В зависимости от выбранной команды осуществляется та или иная операция. Пример – сайт может быть закрыт или доступ к информации на веб-портале будет полностью предоставлен клиенту.
Преимущества и недостатки
Google указывает на то, что всплывающие окна, как и другие элементы онлайн-страниц, предусматривают ряд преимуществ и недостатков. Зная о них, разработчики смогут понять, насколько целесообразно использовать изучаемый компонент в своем проекте.
К плюсам всплывающих окон Google относит:
- Сбор контактных данных. Pop Up может включать в себя форму, запрашивающую все необходимые сведения для обратной связи. Для пользователя такой прием удобен тем, что не нужно искать соответствующую вкладку по всему веб-порталу. Необходимые данные удастся получить буквально за один клик.
- Возможность вывода важных предупреждений. Всплывающие окна, согласно Google, могут сообщать пользователям о различных значимых манипуляциях. Это помогает предотвратить непредвиденные ситуации. Пример – незапланированное удаление содержимого корзины в интернет-магазине.
- Возможность быстрого доступа к корзине. Соответствующая практика имеет значение для e-commerce. Пример – пользователь хочет быстро посмотреть содержимое корзины и сумму предстоящей покупки. Некоторые Интернет-магазины предлагают перейти для этого на отдельную страницу, отдаляя клиентов от просматриваемых каталогов. С помощью Pop Up можно вывести соответствующие данные на экран, оставаясь на «прежней» странице.
Google также указывает, что создаются всплывающие окна разными способами и без существенных хлопот. Можно справиться с этой задачей как средствами JavaScript, так и только за счет CSS/HTML.
К недостаткам изучаемого элемента Google относит:
- Вероятность появления спама. Некоторые всплывающие окна буквально заваливают пользователей ненужной информацией. Иногда это происходит почти сразу после посещения приложения или сайта.
- Нанесение вреда функционированию других приложений. Иногда Pop Up может помешать пользователю работать, а в редких случаях – приводит к утрате проделанной многочасовой работы. Примером служат конфузные ситуации, возникающие при выполнении разнообразных задач в Windows 95 и 98. Они возникали из-за появления всплывающих окон прямо поверх рабочего стола, а не окна приложения/сайта. В Windows NT и последующих сборках операционных систем от Microsoft данная проблема была устранена.
- Незаметные модальные окна. Обычно они встречаются в open-source-приложениях. Пример – у пользователя открыто множество одинаковых программ, в одной из них появляется предупреждающее всплывающее окно. Приходится тратить немало времени на прояснение ситуации с зависанием системы.
Google отмечает, что модальное окно – это удобная технология, но использовать ее необходимо осторожно.
Особенности
Верстка сайтов – это процесс, предусматривающий немало особенностей. Случается так, что на компьютере или ноутбуке все работает исправно, а в мобильной версии веб-портала – нет. Поэтому Google рекомендует запомнить следующие особенности всплывающих окон HTML/CSS:
- Адаптивность. Pop Up – это важные интерфейсные элементы, помогающие пользователям. Именно поэтому при их создании необходимо обратить внимание на адаптивность соответствующего компонента для мобильных устройств. Большая часть Интернет-пользователей посещает приложения и сайты со смартфонов/планшетов.
- Кросс-браузерность. Google говорит о том, что этот параметр указывает на одинаково хорошее отображение/функционирование сайта/приложения в разных браузерах. В процессе создания модальных окон могут возникать проблемы с их корректным выводом или работоспособностью. Пример – в Google Chrome кнопки работают, а в Safari – нет. Во избежание подобных ситуаций необходимо тестировать изучаемый элемент в разных браузерах.
- Пользовательский опыт и визуальное оформление. Google подчеркивает, что дизайнеры и разработчики не слишком часто уделяют внимание логике и дизайну всплывающих HTML-окон. Это негативно сказывается на посещаемости портала/приложения. Пользователи хотят, чтобы подобные элементы были максимально простыми и визуально симпатичными. Соответствующие особенности необходимо учесть при их создании и внедрении на веб-портал.
Теперь, когда особенности и определение изучаемого компонента понятны, можно создать modal window.
Создание всплывающего окна
Google подчеркивает, что PopUp window может быть создан несколькими способами – с применением JS и без него. Далее приведен пример с использованием языка программирования JavaScript. Предстоит создать простейшее модальное окно, которое предупреждает посетителя сайта о том, что он планирует очистить корзину.
Подготовка разметки
Пользоваться тегами HTML и другими элементами верстки не обязательно для первого примера реализации изучаемого компонента страницы. Сначала необходимо создать контейнер для позиционирования элементов интерфейса на экране. После этого – сформировать div, в который оборачивается заголовок страницы. Сюда также будет входить кнопка, отвечающая за запуск pop up. В конце применяются стили при помощи id и class.
Вот как это будет выглядеть в коде:
А вот сам поп ап, который появляется при нажатии на кнопку. В примере заданы классы, скрывающие его до нажатия клиентом кнопки «Удалить все товары из корзины»:
Теперь остается сформировать окошко, которое появится при клике по кнопке «Да»:
Предварительная подготовка завершена. Теперь можно задавать стили и внедрять JS-код, чтобы все работало исправно.
Базовые стили
В Google можно найти множество примеров CSS modal. В созданном ранее проекте необходимо не просто создать Pop Up, а еще и «привести его в порядок». А именно:
- задать цвета;
- подключить шрифты;
- расположить информацию и другие элементы окна в положенных местах.
Вот пример подключения шрифта с 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;
}Вот задание стиля контейнеру для корректного отображения в проекте:
А вот задание стилей для заголовка страницы:
Теперь необходимо стилизовать кнопку:
Остается привести модальное окно к нормальной форме представления:
Этот процесс необходимо рассмотреть более подробно. Overlay включает в себя стили заднего фона модального окна HTML/CSS. Это необходимо для гарантированного и точного отделения Pop Up от страницы веб-портала. Overlay.show задает свойство display block для отображения фона. Этот класс может присваиваться через JS-код:
А вот задание стилей для кнопки «Да». Она отвечает за удаление товара из корзины:
Google подчеркивает, что при использовании JS, HTML и CSS одновременно, именно JavaScript-код обеспечивает работоспособность проекта. Основная работа, связанная с созданием модальных окон проделана. Осталось лишь все «активировать».
Оживление всплывающего окна
Завершающий этап создания изучаемого элемента – это «оживление» модального окна. Согласно Google, делается это при помощи JS-кода. Вот о каких особенностях рассматриваемого примера необходимо помнить:
- Обработчики событий используются для реакции на пользовательские действия.
- При клике по «Удалить все товары из корзины» modal-css будет отображаться на странице.
- При нажатии на «Нет» рассматриваемый элемент закрывается, а на «Да» – закрывается, но на экране появляется сообщение об успешном удалении товаров.
- Кнопка «Перейти в каталог» отвечает за сокрытие сообщения об успешном очищении корзины. Google указывает на то, что в реальном Интернет-магазине обычно после удаления товаров клиента сразу переводят обратно в каталог.
Для «активации» PopUp сначала требуется объявить переменные, в которые записываются id для дальнейших операций:
Теперь необходимо написать код для оперирования id:
При нажатии на deleteBtn необходимо установить CSS-свойство display для компонента с id popup на block. Это требуется для отображения Pop Up. Также требуется добавить класс show к элементу с id overlay – он отвечает за эффект затемнения.
Следующий этап – установка обработчика событий по кнопке noBtm. При нажатии на нее CSS-свойство display для popup меняется на none. Это нужно для скрытия всплывающего окна. Требуется удалить класс show для overlay, чтобы избавиться от затемнения:
Аналогичные действия проделываются с обработчиком событий на клик по кнопке yesBtn. При нажатии на нее требуется установить CSS-свойство display для popup на значении none. Поп Ап будет скрыт.
CSS-свойство display для success нужно изменить на block для демонстрации сообщения об успешном удалении товаров. А еще – добавить класс show к overlay:
Google подчеркивает, что теперь остается лишь добавить обработчик событий на нажатие по кнопке с id buyBtn:
Здесь установлено CSS-свойство display на none у компонента success. Эта операция отвечает за сокрытие сообщения об успешной очистке корзины. Остается снять класс show у overlay, чтобы избавиться от затемнения у модального HTML-окна.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!
