如何在移动设备上的 Bootstrap 模式上正确显示 reCAPTCHA？答案

【问题标题】：How do I make a reCAPTCHA display properly on a Bootstrap modal on mobile?如何在移动设备上的 Bootstrap 模式上正确显示 reCAPTCHA？
【发布时间】：2015-06-10 23:14:03
【问题描述】：

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

我今天已经在处理关于在 iframe 中更改内容的各种有趣的问题。

这是一个 z-index 修复，还是有更多？

【问题讨论】：

标签： twitter-bootstrap css mobile recaptcha bootstrap-modal

【解决方案1】：

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

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

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

【讨论】：

【解决方案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" );
}

【讨论】：