Question

我有一个全屏fancybox，用户需要输入他们的出生日期才能关闭灯箱。但是，在移动设备上，用户可以点击屏幕边缘以绕过灯箱。当用户输入表单的字段（并且浏览器自动放大）然后点击“＆＃39; x”时，这是最明显的。为了摆脱形式，他们可以看到灯箱背后的网站。见照片http://postimg.org/image/n34gftg2x/

移动设备上的chrome和safari都会发生这种情况。

灯箱外部div的CSS（不包括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 js设置为：

$.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＆＃39; age-gate＆＃39;但它在移动设备上正常运行。

知道导致此问题的原因以及如何预防？提前谢谢！

Answer 1

您是否尝试将position添加到包含元素？

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

然后，这将始终将容器粘贴到页面底部。

如果它还在挣扎，你也可以尝试添加!important。

Answer 2

确保您在fancybox默认样式中没有包含padding，margins或borders的包装。

此外，您的网页正在缩小，因为它没有包装，告诉该位置应该是fixed，然后它不会移动。将以下内容应用于fancybox-overlay。

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

它应该使fancybox-overlay固定，因此在调整窗口大小时它不会缩小或移动。

Answer 3

解决：似乎叠加div甚至没有出现。

通过将以下代码（空函数）添加到fancybox js设置，我能够解决问题：

afterShow: function () {    
}

手机上的全屏Fancybox允许用户点击

3 个答案: