Проблема с Fancybox на iPhone

Необычная коробка, похоже, имеет проблемы с работой на iPhone и iPad.

Перейдите сюда http://fancybox.net/blog и нажмите "5. Отобразите форму для входа в систему" Попробуйте сейчас" на странице в iPhone или ipad. Форма не является центром, и когда вы пытаетесь ввести свои данные, окно перемещается по странице и делает ее непригодной.

Любые исправления?

Спасибо, С

Ответ 1

Fancybox пытается автоматически изменять размер и центрировать себя каждый раз при изменении размера окна браузера, и это событие сильно активируется на iPad и iPhone. Для фэнтези 1.3.4 код, который управляет этим, - это строка 608:

$(window).bind("resize.fb", $fancybox.resize);

Чтобы исправить эту проблему, я изменил эту часть fancybox JS и добавил еще один параметр "resizeOnWindowResize", который вы можете установить на false для пользователей iPad и iPhone или просто отключить все вместе.

if(currentOpts.resizeOnWindowResize) {
   $(window).bind("resize.fb", $fancybox.resize);    
}

Вы также должны добавить значение по умолчанию для этой опции в хэш-карте $.fn.fancybox.defaults.

Затем при вызове fancybox вы можете использовать эту новую опцию:

$('#fancybox_link').fancybox(${'scrolling': 'no',
                              width: 'auto',
                              height: 'auto',
                              centerOnScroll: false,
                              resizeOnWindowResize : false});

Ответ 2

В Fancybox 2.0 появилась новая опция, которая помогла мне решить эти проблемы с прокруткой на iPhone:

fixed: false,

Ответ 3

Хорошо, так что я новичок в этом и не уверен, что это будет работать на всех устройствах, но у меня это управляемо на моем iPhone. То, что я сделал, это проверить "Показать заголовок" в настройках носителя для iframe и установить положение "внутри"

Когда я создаю ссылку или изображение, я ставлю это как заголовок:

<a href="http://www.fetalscreening.com/nuchal_screening.php" target="_blank">
  Click in having trouble with mobile device
</a>

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

Снова я не уверен, что это верный путь огня, но я провел последние 5 часов чтения сообщений и часто задаваемых вопросов, пытаясь что-то придумать.

Он служит моим целям. Если у кого-то есть другие предложения, у меня все уши.

Ответ 4

Довольно старая проблема, но этот плагин работает на старом сайте. Я заметил, что Fancybox добавляет класс "fancybox-lock" в тег HTML, используя некоторые простые JS, которые я добавил в BODY, и теперь он работает нормально.

Надеюсь, это поможет кому-то!

JQuery

$(function(){
     var fancyboxVisible = false;
        $(document).on('click', '.fancybox', function() {
           if(fancyboxVisible) {
               $('html, body').removeClass('fancybox-lock');
               fancyboxVisible = false;
           } else {
               $('html, body').addClass('fancybox-lock');
               fancyboxVisible = true;
           }
        });
});