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

Question

我有一个全屏花式框，用户需要输入他们的出生日期才能关闭灯箱。但是，在移动设备上，用户可以点击屏幕边缘来绕过灯箱。当用户进入表单字段(浏览器会自动放大)然后单击“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“年龄门”，但它在移动设备上正常运行。

知道是什么导致了这个问题以及如何预防吗？提前致谢!

Answer 1

您是否尝试过向包含元素添加一个位置？

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

这将使容器始终粘在页面底部。

您也可以尝试添加 !important 如果它仍然很困难。