Всплывающие окна, или pop up window на английском языке - незаменимый атрибут современных сайтов. Второе их название - модальные окна (modal windows). Как правило в них можно увидеть формы для регистрации/входа пользователя в аккаунт, сообщения об успешной отправке письма, предложение оставить телефон для обратного звонка, данные о содержимом корзины или даже целая статья.Как правило, всплывающие окна занимают часть экрана поверх остальных элементов. Они могут быть частью полупрозрачного фона, перекрывающего просмотр основного контента или самостоятельным элементом. С точки зрения html-разметки pop-up, или модальные окна могут быть изначально заложены в макет страницы и скрыты с помощью свойства display: none, а могут быть созданы с помощью JavaScript методом document.createElement(), а затем также с помощью JavaScript удалены.
Давайте рассмотрим способы создания всплывающих окон, доступные нам в CSS, HTML, JavaScript и jQuery.
- Создание всплывающего окна с помощью CSS
- Способ 2. Создание всплывающего окна с помощью HTML-элемента <dialog> и JavaScript
- Способ 3. Создание всплывающего окна с помощью JavaScript
- Способ 4. Использование Bootstrap
- Способ 5. Использование плагинов
Создание всплывающего окна с помощью CSS
Способ 1. Использование псевдокласса :target
Для того чтобы у нас получилось открыть такое модальное или попап-окно, нам понадобятся ссылка с атрибутом href, в котором указан id элемента, который представляет собой такое окно. Для того чтобы закрыть это модальное окно, которое в коде ниже имеет класс popup-wrapper, внутри него необходимо разместить ссылку с крестиком (html-спецсимвол ×) в виде текста, в атрибуте которой мы также должны указать id какого-либо элемента, который будет либо фиксированным заголовком нашей страницы (довольно популярный вариант), либо каким-то пустым элементом с фиксированным позиционированием, ширина и высота которого за счет отсутствия текста является нулевой, но при этом не происходит скачка к верху страницы, как если бы мы использовали ссылку вида <a href="#">×</a>. Таким элементом в коде ниже является <div id="top"></div>.
Для элемента, который будет фоном (в коде это ) нужно добавить фиксированной позиционирование и затемняющий background-color: rgba(0,0,0,.8), а элемент, который будет модальным окном мы сделаем белым и обязательно добавим ему размеры меньше экрана в виде max-width: 80vw и max-height: 80vh (вы можете их изменить по собственному усмотрению), а также overflow-y: auto и overflow-x: hidden, чтобы он имел прокрутку по вертикали в случае избыточного текста по размеру вашего экрана, но при этом не имел прокрутки по горизонтали.
Для того чтобы мы могли закрыть окно при клике на затемнённом фоне, внутри блока <div class="popup-wrapper"><div> нужно расположить ссылку (<a href="#top" class="popup-close-bg"></a>), которая имеет абсолютное позиционирование и ссылается на тот же фиксированный элемент, что и ссылка-крестик.
Для анимации открытия и закрытия окна мы используем изменения свойств visibility с hidden на visible и opacity с 0 на 1 плюс изменение свойства transform для белого окна, а также свойство transition для их анимации.
Вы найдете в примере ниже 2 кнопки для открытия большого и маленького popup-окна.
See the Pen Pop-up with CSS only by Elen (@ambassador) on CodePen.
Минусами этого способа создания модальных окон является прокрутка body при скролле мышью и появление добавок в виде #top #pop-up в адресной строке браузера, когда мы кликаем по ссылкам. Несомненным плюсом является то, что нет необходимости подключать JavaScript и что-то в нем менять, если вы его копируете из какого-либо источника и приспосабливаете к своим элементам.
Второй вариант модального окна, использующего тот же принцип, представлен ниже. Здесь добавлена еще анимация появления модального окна снизу с помощью свойств animation и @keframes.
See the Pen CSS Only Slide-Up Modal by Envato Tuts+ (@tutsplus) on CodePen.
Способ 2. Использование <input type="checkbox">
Для чего только не используются флажки, которые мы можем добавить в код в виде элемента <input type="checkbox">. Чекбоксы можно использовать и для слайдеров, и для мобильных меню, и для выпадающих меню. В том числе с их помощью можно реализовать открытие и закрытие модального окна. Все дело тут в том, что мы можем использовать псевдокласс :checked для флажка и любые свойства для элемента, расположенного под ним за счет описания свойств для родственного селектора. Сам флажок в css мы прячем, а управлять его состоянием можем с помощью элемента label, связанного с флажком по id атрибутом for.
В примере ниже для <input type="checkbox"> с id="modal-toggle" закомментировано свойство display: none, чтобы вы могли увидеть, как при выделении флажка кликом на связанный с ним label отображается модальное окно. Кроме того, label работает и на закрытие этого модального окна, но за счет псевдоэлемента ::after, который получает свойства, выводящие его в виде кнопки-крестика над модальным окном.
See the Pen Modal Window from chekbox by Elen (@ambassador) on CodePen.
Очень элегантный по дизайну вариант модального окна на основе использования checkbox вы найдете ниже. Автор Ivan Grozdic
See the Pen Pure CSS Modal - #15 by Ivan Grozdic (@ig_design) on CodePen.
Еще один подход к созданию такого же модального окна от ekrof , но и с использованием нескольких элементов label в качестве кнопок для открытия и закрытия окна.
See the Pen Modal Dialog - CSS Only (JS optional) by ekrof (@ekrof) on CodePen.
Способ 2. Создание всплывающего окна с помощью HTML-элемента <dialog> и JavaScript
Элемент <dialog> согласно описанию на MDN - это пока еще экспериментальная технология, хотя и с очень хорошей поддержкой браузерами. Он предназначен для отображения модальных, или диалоговых окон, т.е. как раз то, что нам нужно. Только HTML мы здесь, к сожалению, использовать не можем, но управление им с помощью JavaScript тоже несложное.
See the Pen HTML5 Animated Dialog Element by Elen (@ambassador) on CodePen.
Еще один пример с расширенным использованием элемента dialog, который подразумевает использование клавиш Tab или Shift + Tab для переключения фокуса между кнопками диалогового окна.
See the Pen Dialog pop-up by Elen (@ambassador) on CodePen.
Прочитать подробнее про создание и управление модальными окнами с помощью html-элемента dialog вы сможете в отдельной статье.
Способ 3. Создание всплывающего окна с помощью JavaScript
В основном при создании диалоговых окон с помощью JavaScript все упирается в 2 способа:
- Переключение видимости окна с помощью специальных классов. В этом случае модальное окно со всем содержимым или его основой уже находится в разметке страницы.
- Создание модального окна "с нуля", т.е. с использованием метода
document.createElement()для нескольких вложенных элементов, для которых в css уже прописаны свойства. Контент для таких элементов можно получать из JSON-файлов или создавать в виде 1-2 строк и добавлять с помощью свойстваinnerHTML, например.
Анимация при открытии и закрытии окна реализуется с помощью свойств animation и @keyframes или transition.
Давайте рассмотрим несколько примеров. Зачастую принцип реализации похож, но код отличается в плане использования классов с разными свойствами и тем контентом, который отображается в модальном окне. Это может быть как простое сообщение, так и текст поста.
Примеры открытия модальных окон с помощью изменения классов
Пример ниже основан на том, что мы отображаем фоновый элемент с модальным окном внутри него с помощью класса, который заменяет display: none на display: flex, т.к. разметка внутри фона предполагает использование свойств Flexbox-модели. Также мы размываем контент страницы, добавляя к нему класс blured с css-фильтром blur. Для body мы добавляем свойство overflow:hidden, отключая таким образом возможность прокрутки контента. При кликах на кнопках внутри модального окна мы выполняем противоположные действия.
Модальное окно также можно закрыть кликом по фону. Чтобы окно не закрывалось по клику на любом его вложенном элементе, кроме кнопок с классом close-modal в функции closeModal(event) мы проверяем, какой элемент является event.target, т.е. попадает под курсор при клике внутри модального окна.
Анимация реализована с помощью свойств animation и @keyframes. Для того чтобы добавить анимацию исчезновения, нужно задействовать метод setTimeout() с задержкой, чуть меньшей, чем время анимации в 500ms.
See the Pen Pop-up JS by Elen (@ambassador) on CodePen.
Вариант ниже с анимацией типа transition, прячет модальное окно с помощью свойства transform: rotateX(-90deg), т.е. он содержит это окно в разметке, но оно фактически представляет собой тонкую невидимую линию поперек экрана. Этот код также основан на смене классов для модального окна с основным классом panel.
See the Pen Flappy Dialog by Alex (@alexanderkwright) on CodePen.
В этом примере автор Florin Pop меняет видимость элемента, расположенного в html-разметке, переключая класс .visible с помощью методов toggle() и remove(), доступных в свойстве classList для элемента с классом.floating-btn.
See the Pen Course Card UI Design - #094 of #100Days100Projects by Florin Pop (@FlorinPop17) on CodePen.
Создание модального окна "с нуля"
Второй способ создания модального окна вы найдете ниже. Здесь модальное создается методом document.createElement()Стили для элементов похожи на те, что были в предыдущих примерах. Еще одним отличием является способ фиксации пространства под прокрутку контента при открытии модального окна за счет использования css-переменной и padding-right для body.
See the Pen JS Modal by Elen (@ambassador) on CodePen.
Примеры модальных окон для отображения постов
В 2-х примерах ниже от Envato Tuts+ закрытие окна связано с отслеживанием элемента, у которого есть атрибут data-close (подробнее о data-атрибутах). Разница между примерами - в отображении контента поста. Может быть использована, например, для постов в WordPress.
Вариант 1
See the Pen How to Build a Full-Screen Modal With HTML, CSS, & JavaScript by Envato Tuts+ (@tutsplus) on CodePen.
Вариант 2
See the Pen How to Build a Full-Screen Modal With HTML, CSS, & JavaScript (Two-Column Layout Version) by Envato Tuts+ (@tutsplus) on CodePen.
Вариант 3
Отличный пример от Rachel Smith, когда при клике на карточку с заголовком и изображением мы получаем текст поста. В примере текст размещен в JS-коде, но его также можно загружать из какого-либо JSON-файла.
See the Pen Expanding card page transition effect by Rachel Smith (@rachsmith) on CodePen.
Пример ниже уже посложнее.
See the Pen Responsive Modal Design by Elen (@ambassador) on CodePen.
Множество вариантов открытия окна с различными эффектами
See the Pen Nifty Modal Window or Slider Effects by coldarif (@coldarif) on CodePen.
Способ 3. Создание всплывающего окна с помощью jQuery
Самый простой вариант - открытие модального окна за счет добавления/удаления класса open для <div class="pop-up">. Аналог того, что делали в варианте с JavaScript.
See the Pen Pop-Up Overlay by Aaron Taylor (@tt0113243) on CodePen.
Еще один вариант модального окна от Adventures in Missions с возможностью закрыть его нажатием на клавишу Esc.
See the Pen Simple Confirmation Popup by Elen (@ambassador) on CodePen.
автор Naoya
See the Pen jquery modal #1 by Naoya (@nxworld) on CodePen.
Различные варианты появления модального окна с помощью jQuery
See the Pen Modal Animations by Jesse Couch (@designcouch) on CodePen.
Интересный вариант модального окна для демонстрации изображений с помощью jQuery от Fabio Ottaviani
See the Pen DailyUI #016 - Popup / Overlay by Fabio Ottaviani (@supah) on CodePen.
Способ 4. Использование Bootstrap
Для Bootstrap-5 стандартные модальные окна открываются за счет того, что вы подключаете css от Bootstrap, js-файл от Bootstrap и добавляете разметку определенного типа. Для кнопки или ссылки вы должны добавить атрибуты data-bs-toggle="modal" и data-bs-target="#idModal". Модальное окно должно иметь тот же id, что и указанный в атрибуте data-bs-target="#idModal". Для закрытия окна элемент должен иметь атрибут data-bs-dismiss="modal". В разметке модального окна должны быть элементы с определенным порядком вложенности и классами , т.к. для них прописаны правила в css.
Весь функционал по открытию и закрытию окна выполняет скрипт в bootstrap.js.
В примере ниже вы найдете 4 модальных окна с разметкой для 4-х видов модальных окон.
See the Pen Bootstrap 5 modal by Elen (@ambassador) on CodePen.
Форма логина внутри модального окна для 4-й версии Bootstrap от Larissa Rabello . Без JS кода, только функционал Bootstrap.
See the Pen Sign Up Modal by Larissa Rabello (@larirabello) on CodePen.
Bootstrap 3
See the Pen 30+ Bootstrap Modal Animation Effects by antoncabon (@antoncabon) on CodePen.
Перетягиваемое окно
В этом примере использован Bootstrap 3-й версии + jQuery, т.к. 3-й Bootstrap работал на основе jQuery, + jqueryUI, который уже подустарел, прямо скажем. Однако, если у вас сайт, который был создан на основе именно этого версии фреймверка, возможно, вам пригодится код от Adam Joiner. Тем более, что он очень простой.
See the Pen Draggable Bootstrap Modal Window by Adam Joiner (@adamcjoiner) on CodePen.
Способ 5. Использование плагинов
Поскольку очень много плагиов в свое время было создано под jQuery, то именно с них мы начнем.
jQuery-плагины для создания модальных окон
jQuery Modal
Всю информацию вы найдете на официальном сайте jQuery Modal. Для подключения функционала плагина для модальных окон нужно подключить jQuery, а также использовать CSS и JS с CDN.
В разметке окна нужно указать id и class="modal". Для закрытия окна при клике на ссылку нужно указывать атрибут rel="modal:close":
| 1 2 3 4 5 6 7 8 | <!-- Модальное окно с id --> <div id="ex1" class="modal"> <p>Thanks for clicking. That felt good.</p> <a href="#" rel="modal:close">Close</a> </div> <!-- Ссылка с атрибутом rel="modal:open" для открытия окна --> <p><a href="#ex1" rel="modal:open">Open Modal</a></p> |
А в элементе, который должен открывать модальное окно, должен быть атрибут rel="modal:open". В плагине есть ряд настроек, которые позволяют открывать окно с анимацией, убирать кнопку в виде крестика, загружать AJAX-данные.
Пример с несколькими модальными окнами:
See the Pen jQuery Modal Plugin by Elen (@ambassador) on CodePen.
Remodal
Плагин Remodal существует уже давно. Он также требует подключения jQuery, js-файла плагина и css от плагина (ссылка на CDN). Плагин предполагает наличие определенной разметки. Для фонового элемента .remodal-overlay придется добавить свой стиль.
Модальное окно должно иметь атрибут data-remodal-id="modal", а элемент-ссылка или кнопка, который открывает окно - атрибут data-remodal-target="modal".
See the Pen Remodal.js by Elen (@ambassador) on CodePen.
Плагин animateModal.js
Плагин animateModal.js предназначен для создания полноэкранных модальных окон. Он также требует подключения
Подключить js-код плагина можно по ссылке:
| 1 | https://cdn.jsdelivr.net/npm/animatedmodal@1.0.0/animatedModal.min.js |
Плюс вам понадобится css-код от animate.css, правда не самой современной версии:
| 1 | https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css |
Для работы модального окна необходимо сделать определенную разметку и вызвать основную функцию:
| 1 | $("#link_id").animatedModal(); |
Пример:
See the Pen amimateModal.js + jQuery by Elen (@ambassador) on CodePen.
Важно: кнопка, которая закрывает окно, должна иметь класс с id этого модального окна: .close-animatedModal.
Настройки, которые можно указать для плагина.
| Переменная | По умолчанию | Настройки | Описание |
|---|---|---|---|
| color | #39BEB9 | HEX, HSL, RGB, RBA | Определяет цвет фона |
| animatedIn | zoomIn | Выберите здесь | Анимация при открытии модального окна |
| animatedOut | zoomOut | Выберите здесь | Анимация при закрытии модального окна |
| animationDuration | .6s | seconds | Продолжительность анимации |
| overflow | auto | scroll; hidden; auto; | Делает модальное окно прокручиваемым или непрокручиваемым |
Fancybox
Fancybox - это плагин для создания галерей, но с его помощью можно создавать и модальные окна. Он существует в 2-х вариантах: Fancybox 3 основан на jQuery, а более современный вариант - на ванильном JS, но оба варианта используют атрибут data-fancybox.
Первый пример - с jQuery. Дополнительный код не нужен, достаточно добавить атрибуты.
See the Pen Fancybox 3 Modal by Elen (@ambassador) on CodePen.
Второй пример - с использованием классического JS. Нужно добавить небольшой код JavaScript.
| 1 2 3 4 5 6 7 | Fancybox.bind("[data-fancybox]", { // Your custom options }); //или Fancybox.bind("[data-fancybox]"); |
Теперь тестируем сам пример.
See the Pen Fancybox JS Modal by Elen (@ambassador) on CodePen.
JavaScript плагины
Плагин Micromodal.js
Micromodal.js — это легкий плагин, написанный на чистом JavaScript. С его помощью можно создавать модальные диалоговые окна, соответствующие рекомендациям WAI-ARIA. Весит всего 1,9 кб, поэтому хорош для многих сайтов.
Для того чтобы подключить библиотеку, можно использовать ссылку с CDN. Стили придется написать самостоятельно или взять из предлагаемого на оффсайте примера. Для элемента-ссылки или кнопки, который будет открывать модальное окно, нужно добавить атрибут data-micromodal-trigger="modal-id". Для элемента, который закрывает окно нужно указать атрибут data-micromodal-close.
Чтобы код плагина сработал, необходимо в вашем js-файле вызвать функцию init(): MicroModal.init();
Пример с вызовом модального окна кликом по ссылке:
See the Pen Micromodal.js by Elen (@ambassador) on CodePen.
Открывать и закрывать модальное окно можно программно:
| 1 2 | MicroModal.show('modal-id'); MicroModal.close('modal-id'); |
Пример с уже открытым модальным окном.
See the Pen Micromodal.js by Burmese Potato (@BurmesePotato) on CodePen.
Методы init() и show() принимают необязательный объект конфигурации. Это позволяет вам устанавливать собственные обратные вызовы и контролировать поведение модального окна.
| 1 2 3 4 5 6 7 8 9 10 11 12 | MicroModal.init({ onShow: modal => console.info(`${modal.id} is shown`), onClose: modal => console.info(`${modal.id} is hidden`), openTrigger: 'data-custom-open', closeTrigger: 'data-custom-close', openClass: 'is-open', disableScroll: true, disableFocus: false, awaitOpenAnimation: false, awaitCloseAnimation: false, debugMode: true }); |
Sweetalert 2
Sweetalert 2 - это плагин, который подразумевает создание модального окна без разметки, только за счет js-кода. Он использует функцию Swal.fire() со множеством параметров. С этим плагином можно использовать Font Awesome, Animate.css, разные типы полей ввода, чекбоксы, выпадающие списки и т.п., несколько цветовых схем. В общем, довольно много всего.
В примере ниже вы найдете несколько вариантов диалоговых окон, вызванных с помощью Sweetalert 2. Еще больше примеров вы найдете на официальном сайте.
See the Pen Remodal.js by Elen (@ambassador) on CodePen.
Примеры использования модальных окон
Галерея типа Lightbox на чистом JS
See the Pen Lightbox Gallery by Elen (@ambassador) on CodePen.
Галерея с модальными окнами на JS от Arby
See the Pen Open Props - Image Gallery - View Transitions API & Scroll-Driven Animations by Arby (@mobalti) on CodePen.
Диалоговое окно на React
See the Pen From button to dialog by Camille Guy (@camilleguy) on CodePen.
Tailwind CSS и Vue.js
See the Pen Tailwind CSS Modal Demo with Animations by Marco Mark (@m2de) on CodePen.
Всплывающие сообщения
See the Pen TOASTS by Ryan Trimble (@mrtrimble) on CodePen.
Более сложный с точки зрения кода вариант всплывающих сообщений
See the Pen Lotsa Notifications by Jon Kantner (@jkantner) on CodePen.
Использование диалогового окна для воспроизведения видео
See the Pen FullScreen Vimeo Popup with Autoplay and CSS3 Transitions by Elen (@ambassador) on CodePen.
Не совсем всплывающее окно, но его подобие можно использовать для реализации открывающегося меню.
See the Pen Colourful Flower Popup Menu by Jasper LaChance (@jasperlachance) on CodePen.
Еще одно всплывающее меню
See the Pen #codeVember #18/2021: popup menu (click it, you know you want to!) by Ana Tudor (@thebabydino) on CodePen.
Заключение
Надеюсь, что из всех приведенных в этой статье способов вы нашли хотя бы один для себя. Модальные, или pop-up, окна сейчас встречаются почти на всех сайтах. Вы можете разнообразить их внешний вид за счет CSS или воспользоваться уже готовым решением в виде Bootstrap или какого-либо плагина. Теперь нужно просто взять и сделать такое диалоговое окно на своем сайте.
