如何在移动设备上的引导模式上正确显示 reCAPTCHA

Question

如果我使用 Bootstrap 在模态登录框上创建 reCAPTCHA 并在足够小的移动设备（如 Galaxy S4）上显示，则会显示 CAPTCHA 的辅助模态，但不允许滚动，导致我无法选择所有图像并提交。

我今天一直在处理各种关于在 iframe 中更改事物的有趣问题。

这是 z 索引修复，还是还有更多内容？

Answer 1

这与以下事实有关：作为默认引导程序，您不允许您在模态下方滚动，但是 recaptcha 图像选择器显示在折叠下方。 我设法通过设置modal-dialog的 min-height 属性来使其工作，以便它考虑到 recaptca 所需的额外高度。

您可能需要根据模态中内容的大小调整下面的高度：

.modal-dialog {
    min-height: 1000px;
}

Answer 2

我用模态上的绝对位置解决了它

#myModal { 
    position: absolute; 
}

在成功回调后将模式弹回原位

function enable_sbmt(){
      if( grecaptcha.getResponse() ){
        $( "#myModal" ).css( "position", "fixed" );
        $(window).scrollTop(0);
      }
      else{ //console.log('false');
    }
}
function expired_callback(){
  $( "#myModal" ).css( "position", "absolute" );
}