Приветствую, друзья, сегодня я покажу, как создать попап на чистом js. В данном всплывающем окне вы можете разместить что угодно. Например, форму для обратной связи (как в данном примере) или любой другой контент. Так же мы реализуем несколько способов скрытие модального окна. Первый способ — скрытие попап окна при клике на фон, а второй — при клике на крестик. Пример того, что вы получите в итоге, можно посмотреть по ссылке на codepen .
HTML-структура модального окна
Для начала создадим HTML разметку для нашего всплывающего окна на чистом JavaScript. Тут все достаточно просто, так что я просто размещу код. Единственное, что стоит упомянуть — вы можете вместо формы разместить любой HTML код.
Так же вам нужно добавить кнопку, при клике на которую нужно открывать окно. В моем случае, это тег с классом ‘open-popup’ .
Стилизация всплывающего окна на чистом JS
Далее необходимо стилизовать наш попап на чистом js. CSS код так же достаточно простой. Большинство кода это вовсе стилизация формы, которая никак не влияет на само окно. Важный код для урока я вынесу в самое начало вставки с кодом. Так же я отмечу её с помощью комментариев.
/* Важная часть */ .popup__bg < position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); opacity: 0; // Скрываем фон и сам попап pointer-events: none; // Запрещаем ему быть целью событий transition: 0.5s all; >.popup__bg.active < // При добавлении класса 'active' opacity: 1; // Показываем фон и попап pointer-events: all; // Возвращаем события transition: 0.5s all; >.popup < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); // Центрируем и масштабируем в 0 само окно background: #fff; width: 400px; padding: 25px; transition: 0.5s all; >.popup.active < // При добавлении класса 'active' transform: translate(-50%, -50%) scale(1); // Так же центрируем и плавно увеличиваем transition: 0.5s all; >/* Конец важной части */ /* Далее код для стилизации формы */ .close-popup < position: absolute; top: 10px; right: 10px; cursor: pointer; >.popup label < width: 100%; margin-bottom: 25px; display: flex; flex-direction: column-reverse; >.popup .label__text < font-size: 14px; text-transform: uppercase; font-weight: 500; color: #cfd0d3; margin-bottom: 5px; >.popup input < height: 45px; font-size: 18px; border: none; outline: none; border-bottom: 1px solid #cfd0d3; >.popup input:focus < border-bottom: 1px solid #2982ff; >.popup input:focus + .label__text < color: #2982ff; >.popup textarea < resize: none; width: 100%; height: 150px; border: none; outline: none; border-bottom: 1px solid #cfd0d3; font-size: 18px; padding-top: 5px; >.popup textarea:focus < border-bottom: 1px solid #2982ff; >.popup textarea:focus + .label__text < color: #2982ff; >.popup button < width: 100%; height: 45px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; border: 2px solid #2982ff; background: #2982ff; cursor: pointer; text-transform: uppercase; transition: 0.5s all; >.popup button:hover
Показ всплывающего окна при клике
Теперь переходим к самому интересному. Будем писать JavaScript код для модального окна. Для начала, создадим переменные, в которые мы поместим все DOM-елементы, которые нам понадобятся в будущем.
let popupBg = document.querySelector('.popup__bg'); // Фон попап окна let popup = document.querySelector('.popup'); // Само окно let openPopupButtons = document.querySelectorAll('.open-popup'); // Кнопки для показа окна let closePopupButton = document.querySelector('.close-popup'); // Кнопка для скрытия окна
Далее напишем код, для появления модального окна на чистом JavaScript. Для начала, нужно повесить обработчик события клика ( addEventListener ) на каждую кнопку открытия окна. При клике — указываем, что для фона и для самого окна нужно добавить класс ‘active’ . А так же предотвращаем стандартное поведение браузера, что бы при клике на ссылку браузер не прыгал вверх странички.
openPopupButtons.forEach((button) => < // Перебираем все кнопки button.addEventListener('click', (e) =>< // Для каждой вешаем обработчик событий на клик e.preventDefault(); // Предотвращаем дефолтное поведение браузера popupBg.classList.add('active'); // Добавляем класс 'active' для фона popup.classList.add('active'); // И для самого окна >) >);
Скрытие попап окна при клике на крестик
Тут код очень простой. Указываем, что при клике на крестик, нужно убрать активные классы с фона и самого окна.
closePopupButton.addEventListener('click',() => < // Вешаем обработчик на крестик popupBg.classList.remove('active'); // Убираем активный класс с фона popup.classList.remove('active'); // И с окна >);
Прячем попап окно на чистом js при клике на фон
Теперь разберемся как спрятать попап при клике на фон. Нужно повесить обработчик клика на весь документ. Далее необходимо передать событие (е). Если цель события (клик) — это фон окна, то мы так же убираем активные классы с фона и окна.
document.addEventListener('click', (e) => < // Вешаем обработчик на весь документ if(e.target === popupBg) < // Если цель клика - фот, то: popupBg.classList.remove('active'); // Убираем активный класс с фона popup.classList.remove('active'); // И с окна >>);
Спасибо, что прочитали. Если у вас остались вопросы — задавайте их в Telegram-канале или в комментариях на YouTube. Так же буду благодарен, если вы прочитаете другие мои статьи:
Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)
Вызов и закрытие модального окна — Триггеры и data-атрибуты
Пропишем функционал модального окна и пропишем его вызов сразу на несколько триггеров .
Триггеры — это элементы, которые вызывают последующие действия.
Продолжим работать с проектом, где создавались табы и таймер обратного отсчета.
Триггерами модального окна являются две кнопки «Связаться с нами».
Исходные данные — Модальное окно скрыто
Фрагмент HTML-кода для модального окна + триггеры
Связаться с нами
Связаться с нами
Перезвонить мне
Исходная страница в Браузере
По умолчанию модальное окно скрыто. Чтобы его увидеть, нужно в Инструментах разработчика — во вкладке Elements выделить . А во вкладке Styles — снять галочку со свойства display: none . См. иллюстрацию ниже.
Используем data-атрибуты
Триггеры(в данном случае две кнопки «Связаться с нами») часто имеют разные классы /идентификаторы/теги, поэтому чтобы группа триггеров вызывало одно и то же действие, им назначают data-атрибуты.
Например, data-атрибут data-modal , установленный для группы кнопок, будут говорить о том, что эти элементы отвечают за вызов модального окна.
То же самое касается элемента/ов , закрывающего модальное окно — ему/им также можно назначить data-атрибут , например data-close .
Связаться с нами
Связаться с нами
Перезвонить мне
Прописаны data-атрибуты data-modal строки №5 и №11 — для возможности вызова модального окна и data-close строка №19 — для закрытия модального окна.
Здесь для вызова и скрытия модального окна используется свойство classList и его метод toggle.
Закрытие модального — Клик на область вне окна
Закрытие модального окна при клике на подложке/область вне окна.
Рассмотрим структуру модального окна.
modal — это подложка модального окна (width: 100% и height: 100%). В примере ниже для наглядности обозначены границы желтого цвета.
modal__dialog — это обертка контента модального окна. Для наглядности обозначены границы красного цвета.
Используя event.target, нужно отследить , куда кликнул пользователь : если клик происходит за пределами модального окна, то есть, в нашем случае, на его подложке modal , то окно будет закрыто.
Если место клика пользователя — это подложка модального окна: if (e.target === modalWindow) , то модальное окно закрывается.
Стоит напомнить, что правильный синтаксис подразумевает обязательную передачу объекта события в качестве аргумента в callback-функцию.
Оптимизация кода
Повторяющийся код заносится в функцию closeModal() .
const modalTrigger = document.querySelectorAll('[data-modal]'), modalCloseBtn = document.querySelector('[data-close]'), modalWindow = document.querySelector('.modal'); modalTrigger.forEach(item => < item.addEventListener('click', () =>< modalWindow.classList.add('show'); modalWindow.classList.remove('hide'); document.body.style.overflow = 'hidden'; >); >); function closeModal()< modalWindow.classList.add('hide'); modalWindow.classList.remove('show'); document.body.style.overflow = ''; >; modalCloseBtn.addEventListener('click', closeModal); // Функция передается // При клике ВНЕ окна - закрываем его modalWindow.addEventListener('click', (e) => < if (e.target === modalWindow) < closeModal(); // Функция вызывается >>);
В первом случае функция closeModal() передается, во втором вызывается.
Закрытие модального — Клик на ESC
Закрытие модального окна при клике на клавишу ESC.
Событие keydown происходит при нажатии клавиши, а keyup – при отпускании.
Как отслеживать нажатия клавиш?
Здесь снова используется объект события и его свойство code.
Свойство code объекта события позволяет получить физический код клавиши .
У каждой клавиши есть свой код.
Таким образом, есть возможность отслеживать код нажатой клавиши.
const modalTrigger = document.querySelectorAll('[data-modal]'), modalCloseBtn = document.querySelector('[data-close]'), modalWindow = document.querySelector('.modal'); modalTrigger.forEach(item => < item.addEventListener('click', () =>< modalWindow.classList.add('show'); modalWindow.classList.remove('hide'); document.body.style.overflow = 'hidden'; >); >); function closeModal()< modalWindow.classList.add('hide'); modalWindow.classList.remove('show'); document.body.style.overflow = ''; >; modalCloseBtn.addEventListener('click', closeModal); // Функция передается // При клике ВНЕ окна - закрываем его modalWindow.addEventListener('click', (e) => < if (e.target === modalWindow) < closeModal(); // Функция вызывается >// Закрытие модального - Клик на ESC document.addEventListener('keydown', (e) => < if (e.code === "Escape" && modalWindow.classList.contains('show')) < closeModal(); >>);
Закрытие модального окна при клике на клавишу ESC.
Обработчик события назначается для объекта document .
Если пользователь нажимает на клавишу ESC , то происходит закрытие модального окна. При условии, что модальное окно открыто: modalWindow.classList.contains(‘show’) (делается это для того, чтобы функция closeModal() не срабатывала при каждом нажатии на клавишу ESC).
How to close popup by clicking outside with JavaScript
I’ve created a popup when a button is clicked in vanilla JavaScript. But I wanted to create a way where I can make the popup close when a user clicks outside the popup but keep the popup visible when clicked inside. Is that possible?
