Question

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

我一直在处理有关iframe中更改内容的各种有趣问题。

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

Answer 1

这与以下事实有关：默认引导程序不允许您在模式下方滚动，但是重新映射图像选择器显示在折叠下方。我已设法通过设置min-height的{{1}}属性来实现此功能，以便考虑到recaptcha所需的额外高度。

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

modal-dialog

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" );
}

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

2 个答案: