Создаём модальное окно

Код модального окна:

Код

<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>

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

Код

display: none;

Вызов модального окна будет при клике на одну из кнопок "Связаться с нами".

Две разных кнопки, на которых будет срабатывать одно и тоже событие.

Находим их в коде и назначаем для них data-атрибуты для того, чтобы их было проще идентифицировать:

Код

<div class="offer__action">
<button data-modal class="btn btn_dark">Связаться с нами</button>
</div>

<div class="header__right-block">
<button data-modal class="btn btn_white">Связаться с нами</button>
</div>

Похожим образом поступаем с элементами, которые будут служить для закрытия модального окна:

Код

Данные атрибуты можно теперь использовать в скрипте.

Получаем необходимые нам элементы:

Код

const modalTrigger = document.querySelectorAll('[data-modal]');
const modal = document.querySelector('.modal');
const modalCloseBtn = document.querySelector('[data-close]');

Алгоритм работы модального окна:

1. потребуется две функции - одна для открытия, другая для закрытия модальных окон

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

Для начала попробуем написать функционал для открытия / закрытия модального окна для одной кнопки:

Код

// Открытие модального окна
modalTrigger.addEventListener('click', () => {
  modal.classList.add('show');
  modal.classList.remove('hide');
});
// Закрытие модального окна
modalCloseBtn.addEventListener('click', () => {
  modal.classList.add('hide');
  modal.classList.remove('show');
});

Немного дополним код, чтобы при открытом модальном окне контент страницы нельзя было скроллить:

Код

// Открытие модального окна
modalTrigger.addEventListener('click', () => {
  modal.classList.add('show');
  modal.classList.remove('hide');
  // запрещаем скролл страницы
  document.body.style.overflow = 'hidden';
});

// Закрытие модального окна
modalCloseBtn.addEventListener('click', () => {
  modal.classList.add('hide');
  modal.classList.remove('show');
  // возвращаем скролл страницы
  document.body.style.overflow = '';
});

Для открытия / закрытия модального окна можно также использовать вариант с toggle

Код

modalTrigger.addEventListener('click', () => {
  modal.classList.toggle('show');
  document.body.style.overflow = 'hidden';
});

modalCloseBtn.addEventListener('click', () => {
  modal.classList.toggle('show');
  document.body.style.overflow = '';
});

Назначаем теперь обработчик события на все кнопки с атрибутом data-modal, используем для этого перебор forEach()

Код

modalTrigger.forEach(btn => {

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

  btn.addEventListener('click', () => {
  modal.classList.add('show');
  modal.classList.remove('hide');

  // запрещаем скролл страницы

  document.body.style.overflow = 'hidden';
  });
});

Закрытие модального окна по клику на свободное место или клавишей Esc

Кликая по белой области открытого модального окна, по факту мы кликаем по блоку с классом .modal__dialog (обёртка для контента модального окна).

Мы можем отслеживать куда именно кликнул пользователь, то есть, если он кликнул не в .modal__dialog, получается он кликнул на подложку и окно нужно закрыть.

В нашем случае подложкой будет являться блок с классом .modal.

Код

// Закрытие окна по клику на подложке

modal.addEventListener('click', (e) => {
  if (e.target === modal) {
  modal.classList.add('hide');
  modal.classList.remove('show');
  document.body.style.overflow = '';
  }
});

У нас в скрипте наблюдается повторение кода в двух местах, поэтому этот повторяющийся код:

Код

modal.classList.add('hide');
modal.classList.remove('show');
// возвращаем скролл страницы
document.body.style.overflow = '';

выносим в отдельную функцию closeModal() и используем в коде уже её

Код

// Функция закрытия модального окна

function closeModal() {

  modal.classList.add('hide');
  modal.classList.remove('show');

  // возвращаем скролл страницы

  document.body.style.overflow = '';
}

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

modalCloseBtn.addEventListener('click', closeModal);

// Закрытие окна по клику на подложке

modal.addEventListener('click', (e) => {

  if (e.target === modal) {
  closeModal();
  }

});

Чтобы реализовать функционал закрытия модального окна при нажатии на кнопку Esc, нужно отслеживать событие keydown (нажатия на кнопку)

Код

// Закрытие окна при нажатии на Esc

document.addEventListener('keydown', (e) => {
  if (e.code === 'Escape') {
  closeModal();
  }
});

Нужно, чтобы этот код срабатывал только тогда, когда модальное окно открыто, поэтому дополним условие:

Код

// Закрытие окна при нажатии на Esc

document.addEventListener('keydown', (e) => {
  if (e.code === 'Escape' && modal.classList.contains('show')) {
  closeModal();
  }
});

Узнать код клавиши


Имя *:
Email *:
Все смайлы
Код *:

Создаём модальное окно

Закрытие модального окна по клику на свободное место или клавишей Esc

Всего комментариев: 0