Как закрыть модальное окно при нажатии кнопки «Назад» на телефоне

При разработке мобильных веб-приложений часто возникает задача: нужно закрывать модальное окно (попап, оверлей) при нажатии аппаратной кнопки «Назад» на Android или жесте возврата в iOS. Это улучшает пользовательский опыт и делает интерфейс интуитивным. В этой статье мы разберём основные способы отслеживания события и реализации закрытия.

Почему это важно для мобильных устройств

На мобильных телефонах кнопка «Назад» является стандартным элементом навигации. Если пользователь открыл модальное окно и случайно нажал «Назад», ожидается, что окно закроется, а не произойдёт переход на предыдущую страницу. Игнорирование этого поведения ведёт к путанице и уходу с сайта.

Отслеживание нажатия кнопки «Назад» через History API

Основной способ перехватить событие нажатия кнопки «Назад» - использовать JavaScript-событие popstate. Когда пользователь нажимает «Назад», браузер меняет текущий URL (или хэш) и генерирует это событие. Алгоритм действий:

• При открытии модального окна добавляем новую запись в историю браузера с помощью history.pushState(null, '', window.location.href).
• При закрытии окна удаляем эту запись через history.back() или history.replaceState.
• Подписываемся на событие window.addEventListener('popstate', handler). В обработчике проверяем, открыто ли модальное окно, и если да - закрываем его и предотвращаем переход.

Альтернативные решения

Использование хэша в URL

Вместо pushState можно менять хэш (window.location.hash = '#modal'). Событие onhashchange будет срабатывать при нажатии «Назад». Этот метод проще, но может конфликтовать с другими фрагментами URL.

Библиотеки и фреймворки

В современных SPA (React, Vue, Angular) управление модальными окнами часто встроено в роутер. Например, в React Router можно использовать модальные маршруты, которые автоматически обрабатывают навигацию назад. Если вы используете чистый JavaScript, подойдёт микро-библиотека history.js.

Предотвращение двойного срабатывания

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

Пример кода на JavaScript

// Открытие modal
function openModal() {
  document.getElementById('myModal').style.display = 'block';
  history.pushState({ modal: true }, '', window.location.href);
}

// Закрытие modal
function closeModal() {
  document.getElementById('myModal').style.display = 'none';
  // Возврат на предыдущую запись
  history.back();
}

// Обработчик popstate
window.addEventListener('popstate', function(event) {
  var modal = document.getElementById('myModal');
  if (modal.style.display === 'block') {
    closeModal();
    // Предотвращаем переход назад
    history.pushState(null, '', window.location.href);
  }
});

В этом примере при открытии модального окна мы добавляем состояние в историю. Когда пользователь нажимает «Назад», срабатывает popstate, мы закрываем окно и сразу восстанавливаем текущий URL, чтобы не уйти со страницы.

Тестирование на реальных устройствах

Обязательно проверяйте поведение на Android (Chrome, Samsung Internet) и iOS (Safari). На iPhone кнопки «Назад» нет, но есть жест свайпа от левого края экрана - он также генерирует popstate. Убедитесь, что ваше решение работает и в этом случае.

Заключение

Закрытие модального окна кнопкой «Назад» на телефонах - обязательный элемент мобильной веб-разработки. Используя popstate и pushState, вы легко реализуете нужное поведение. Выбирайте метод под ваш фреймворк и не забывайте тестировать на разных браузерах.