Как отследить кнопку «назад» на телефонах?

Question

[Donny_Joy]

Надо закрывать модальное окно при нажатии кнопки "назад" на телефонах. Как можно отследить нажатие этой кнопки ? Или может есть другие решения ?

Answer 1

[Виктор Кожухарь]

Опишу только принцип, реализацию уже сделаете сами, либо попросите AI.

Кнопка "назад" работает просто: переводит браузер на предыдущий урл.

Это можно использовать. Вы же, наверняка, используете history API в вашем приложении.
Так вот, при открытии модального окна добавляйте хэш к адресу в history.

https://example.com/page // окна нет
https://example.com/page#modal1 // окно открыто

Таким образом, при нажатии пользователем кнопки "назад", этот хэш удалится из адреса, потому что браузер перейдет на предыдущую страницу, которая имеет тот же адрес, но без этого хэша.

Ваша программа должна добавлять к текущему адресу хэш при открытии окна, и закрывать окно, когда хэш из адреса убирается.

Answer 2

[maksam07]

https://developer.mozilla.org/en-US/docs/Web/API/W...

<script>
  function openModal() {
    document.getElementById('modal').style.display = 'block';
    history.pushState({ modalOpen: true }, '');
  }

  function closeModal() {
    document.getElementById('modal').style.display = 'none';

    if (history.state?.modalOpen) {
      history.back();
    }
  }

  window.addEventListener('popstate', (event) => {
    if (event.state?.modalOpen) {
      closeModal();
    }
  });
</script>