Далее на странице...
- Исходные данные - Модальное окно скрыто По умолчанию модальное окно скрыто - Как его увидеть?
- Используем data-атрибуты Триггерам назначаются data-атрибуты - Для вызова/закрытия окна Для вызова/скрытия модального окна используются инлайн-стили Для body - overflow = 'hidden' - содержимое страницы не прокручивается Для вызова/скрытия окна - свойство classList: методы add и remove Для вызова/скрытия окна - свойство classList: метод toggle
- Закрытие модального - Клик на область вне окна Используется event.target для отслеживания, куда кликнул пользователь
- Закрытие модального - Клик на ESC События keydown и keyup – нажатие и отпускание клавиши Как отслеживать нажатия клавиш? У каждой клавиши есть свой код. event.code - Используется объект события и его свойство code. Обработчик события назначается для объекта document.
Пропишем функционал модального окна и пропишем его вызов сразу на несколько триггеров.
Триггеры - это элементы, которые вызывают последующие действия.
Продолжим работать с проектом, где создавались табы и таймер обратного отсчета.
Триггерами модального окна являются две кнопки "Связаться с нами".
Исходные данные - Модальное окно скрыто
Фрагмент HTML-кода для модального окна + триггеры
Скачать Архив с исходными данными
<header class="header">
.
.
<div class="header__right-block">
<button class="btn btn_white">Связаться с нами</button>
</div>
</header>
<div class="offer__action">
<button class="btn btn_dark">Связаться с нами</button>
</div>
<div class="modal">
<div class="modal__dialog">
<div class="modal__content">
<form action="#">
<div class="modal__close">×</div>
<div class="modal__title">Мы свяжемся с вами как можно быстрее!</div>
<input required placeholder="Ваше имя" name="name" type="text" class="modal__input">
<input required placeholder="Ваш номер телефона" name="phone" type="phone" class="modal__input">
<button class="btn btn_dark btn_min">Перезвонить мне</button>
</form>
</div>
</div>
</div>
<script src="js/script.js"></script>
Исходная страница в Браузере
По умолчанию модальное окно скрыто. Чтобы его увидеть, нужно в Инструментах разработчика - во вкладке Elements выделить <div class="modal">. А во вкладке Styles - снять галочку со свойства display: none. См. иллюстрацию ниже.
Используем data-атрибуты
Триггеры (в данном случае две кнопки "Связаться с нами") часто имеют разные классы/идентификаторы/теги, поэтому чтобы группа триггеров вызывало одно и то же действие, им назначают data-атрибуты.
Например, data-атрибут data-modal, установленный для группы кнопок, будут говорить о том, что эти элементы отвечают за вызов модального окна.
То же самое касается элемента/ов, закрывающего модальное окно - ему/им также можно назначить data-атрибут, например data-close.
HTML-код - data-атрибуты
<header class="header">
.
.
<div class="header__right-block">
<button data-modal class="btn btn_white">Связаться с нами</button>
</div>
</header>
<div class="offer__action">
<button data-modal class="btn btn_dark">Связаться с нами</button>
</div>
<div class="modal">
<div class="modal__dialog">
<div class="modal__content">
<form action="#">
<div data-close class="modal__close">×</div>
<div class="modal__title">Мы свяжемся с вами как можно быстрее!</div>
<input required placeholder="Ваше имя" name="name" type="text" class="modal__input">
<input required placeholder="Ваш номер телефона" name="phone" type="phone" class="modal__input">
<button class="btn btn_dark btn_min">Перезвонить мне</button>
</form>
</div>
</div>
</div>
<script src="js/script.js"></script>
Прописаны data-атрибуты data-modal строки №5 и №11 - для возможности вызова модального окна и data-close строка №19 - для закрытия модального окна.
Пример 1.1 - Используем инлайн-стили
JavaScript-код
const modalTrigger = document.querySelectorAll('[data-modal]'),
modalCloseBtn = document.querySelector('[data-close]'),
modalWindow = document.querySelector('.modal');
// Открываем модальное окно
modalTrigger.forEach(item => {
item.addEventListener('click', () => {
modalWindow.style.display = 'block';
document.body.style.overflow = 'hidden';
});
});
// Закрываем модальное окно
modalCloseBtn.addEventListener('click', () => {
modalWindow.style.display = 'none';
document.body.style.overflow = '';
});
Результат в Браузере
Здесь для вызова и скрытия модального окна используются инлайн-стили.
При этом для тега body устанавливается стиль overflow = 'hidden', чтобы при вызове модального окна содержимое страницы не прокручивалось.
При закрытии модального окна overflow = '' (устанавливается значение по умолчанию).
Пример 1.2 - Свойство classList
JavaScript-код
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';
});
});
modalCloseBtn.addEventListener('click', () => {
modalWindow.classList.add('hide');
modalWindow.classList.remove('show');
document.body.style.overflow = '';
});
Результат в Браузере
Здесь для вызова и скрытия модального окна используется свойство classList и его методы add и remove.
Пример 1.3 - Свойство classList - toggle
JavaScript-код
const modalTrigger = document.querySelectorAll('[data-modal]'),
modalCloseBtn = document.querySelector('[data-close]'),
modalWindow = document.querySelector('.modal');
modalTrigger.forEach(item => {
item.addEventListener('click', () => {
modalWindow.classList.toggle('show');
document.body.style.overflow = 'hidden';
});
});
modalCloseBtn.addEventListener('click', () => {
modalWindow.classList.toggle('show');
document.body.style.overflow = '';
});
Результат в Браузере
Здесь для вызова и скрытия модального окна используется свойство classList и его метод toggle.
Закрытие модального - Клик на область вне окна
Закрытие модального окна при клике на подложке/область вне окна.
Как это сделать?
Рассмотрим структуру модального окна.
modal - это подложка модального окна (width: 100% и height: 100%). В примере ниже для наглядности обозначены границы желтого цвета.
modal__dialog - это обертка контента модального окна. Для наглядности обозначены границы красного цвета.
Используя event.target, нужно отследить, куда кликнул пользователь: если клик происходит за пределами модального окна, то есть, в нашем случае, на его подложке modal, то окно будет закрыто.
JavaScript-код
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';
});
});
modalCloseBtn.addEventListener('click', () => {
modalWindow.classList.add('hide');
modalWindow.classList.remove('show');
document.body.style.overflow = '';
});
// При клике ВНЕ окна - закрываем его
modalWindow.addEventListener('click', (e) => {
if (e.target === modalWindow) {
modalWindow.classList.add('hide');
modalWindow.classList.remove('show');
document.body.style.overflow = '';
}
});
Результат в Браузере
Назначаем для модального окна обработчик события.
Если место клика пользователя - это подложка модального окна: if (e.target === modalWindow), то модальное окно закрывается.
Стоит напомнить, что правильный синтаксис подразумевает обязательную передачу объекта события в качестве аргумента в callback-функцию.
Оптимизация кода
Повторяющийся код заносится в функцию closeModal().
JavaScript-код
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 объекта события позволяет получить физический код клавиши.
У каждой клавиши есть свой код.
Таким образом, есть возможность отслеживать код нажатой клавиши.
JavaScript-код
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.
Обработчик события назначается для объекта .
Если пользователь нажимает на клавишу ESC, то происходит закрытие модального окна. При условии, что модальное окно открыто: modalWindow.classList.contains('show') (делается это для того, чтобы функция closeModal() не срабатывала при каждом нажатии на клавишу ESC).
