Необходимо было сделать, чтобы модальное окно открывалось на смартфоне во всю ширину экрана. Поэтому пользователи чтобы закрыть его использовали кнопку НАЗАД, на своем смартфоне. Но это приводило к переходу на одну страницу назад.
Шаблон сверстан в Oxygen, такой функции по умолчанию нет, поэтому прописал в сниппете следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//По нажатию на кнопку вызова модального окна, добавляет хэш и изменяет историю браузера. 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 закрывает открытое модальное окно.
Пример взят тут, за что им очень благодарен.