На весь экран Fancybox на мобильном телефоне позволяет пользователю щелкнуть

Question

У меня есть полноэкранный fancybox, где пользователю нужно ввести дату рождения, чтобы закрыть лайтбокс. Однако на мобильном телефоне пользователь может коснуться краев экрана, чтобы обойти лайтбокс. Это наиболее очевидно, когда пользователь переходит к полям формы (и браузер автоматически масштабируется), а затем щелкает «x», чтобы выйти из формы, затем они могут видеть веб-сайт за лайтбокс. См. Фото здесь http://postimg.org/image/n34gftg2x/

Это происходит как на хроме, так и на сафари на мобильных устройствах.

CSS-для внешнего DIV лайтбокса (не включая FancyBox включала в себя HTML) является:

#age-gate-cnt { 
    height: 1000px; 
    height: 100vh; 
    width: 100%; 
    overflow: hidden; 
    background-image: url('../../images/bg-hero3.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: top center; 
    background-attachment: fixed; 
} 

настройки В FancyBox расслоение плотной являются:

$.fancybox.open({ 
    content: '<div id="age-gate"></div>', 
    closeBtn: false, 
    modal: true, 
    padding: 0, 
    margin: 0, 
    autoSize: false, 
    fitToView: true, 
    width: '100%', 
    height: '100%', 
    scrolling: 'hidden', 
    helpers: { 
    overlay: { 
     locked: true, 
     closeClick: false 
    } 
    }, beforeShow: function() { 
    $('body').css('overflow', 'hidden'); 
    }, afterClose: function() { 
    $('body').css('overflow', 'auto'); 
    }, 
}); 

Этот сайт здесь: http://www.maestrodobel.com/ имеет аналогичный fancybox 'age-gate', но он корректно функционирует на мобильных устройствах.

Любая идея, что вызывает эту проблему и как ее предотвратить? Заранее спасибо!

Answer 1

Вы пробовали добавить position к содержащему элемент?

#age-gate { 
    position: absolute; 
    bottom: 0; 
} 

Это будет затем прикреплять контейнер к нижней части страницы в любое время.

Вы также можете попробовать добавить !important, если он все еще борется.

Answer 2

Убедитесь, что у вас нет оберток с padding, margins или borders в стиле по умолчанию fancybox.

Кроме того, ваша страница сокращается, потому что у нее нет обертки вокруг, говорящей, что позиция должна быть fixed, тогда она не будет двигаться. Примените нижеследующее значение: fancybox-overlay.

.fancybox-overlay { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
} 

Он должен сделать FancyBox-наложение фиксированной, так что он не будет сжиматься или перемещаться при изменении размеров окна.

Answer 3

SOLVED: Кажется, что оверлейный div даже не появился.

Добавив следующий код (пустой функции) в настройках FancyBox JS, я был в состоянии решить эту проблему:

afterShow: function() {  
}