menex.ru
← Все статьи

Кнопка НАЗАД на Android закрывает модальное окно

29.12.2022 • Теги: #hook #jQuery #Oxygen #wordpress #Хук

Необходимо было сделать, чтобы модальное окно открывалось на смартфоне во всю ширину экрана. Поэтому пользователи чтобы закрыть его использовали кнопку НАЗАД, на своем смартфоне. Но это приводило к переходу на одну страницу назад.

Шаблон сверстан в Oxygen, такой функции по умолчанию нет, поэтому прописал в сниппете следующий код:

//По нажатию на кнопку вызова модального окна, добавляет хэш и изменяет историю браузера.
    jQuery("a.cast-button-butt").on("click", function()  {
        var urlReplace = "#" + jQuery(this).attr('id');
        history.pushState(null, null, urlReplace);
    });
    jQuery("a.button-xs").on("click", function()  {
        var urlReplace = "#" + jQuery(this).attr('id');
        history.pushState(null, null, urlReplace);
    });

// По нажатию на кнопку назад, закрывает модальное окно Oxy
    jQuery(window).on('popstate', function() {
        jQuery(document).ready(function() {
                oxyCloseModal();
            });
    });

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

Пример взят тут, за что им очень благодарен.