Я использовал Fancybox для создания модального лайтбокса ajax для моего сайта. Он хорошо работает во всех браузерах, однако в iOS Safari и Android изменение размеров адресной строки приложения и строки меню временно нарушает дизайн.
Мое модальное окно имеет максимальную высоту 96%. Если он выше, чем размер экрана, как это часто бывает, то вы можете прокручивать вверх и вниз касанием. Все идет нормально. Однако, если вы достигнете конца или вершины, а затем «нажмете» его далее, адресная строка приложения и меню активируются (сжимаются / увеличиваются / появляются / исчезают), и фон страницы начинает прокручиваться. Следовательно, фокус исчезает из лайтбокса, и только когда фон перестает прокручиваться, и вы не взаимодействуете, фокус корректно возвращается в лайтбокс.
Это приводит к плохому и запутанному восприятию пользователя в качестве лайтбокса. Сама по себе не прокручивается и моя пользовательская кнопка закрытия, расположенная сверху, не всегда видна. Так как это поведение браузера, а не веб-страницы, я не смог найти решение.
Я использую последнюю версию Fancybox - 3.5.7.
БазоваяНастройка моего кода выглядит следующим образом:
<a class="quicklook" data-fancybox-quicklook data-type="ajax" data-src="quicklook.ajax.php">Quick Look</a>
//jquery
$('[data-fancybox-quicklook]').fancybox({
touch: false,
btnTpl: { smallBtn: false }
});
quicklook.ajax.php:
<div class="quicklook_lightbox">
<!--- lightbox content --->
</div>
/* css */
div.quicklook_lightbox {
width: 97%;
padding: 1.4em;
max-height: 96%;
}
Цените любые предложения.