css 如何定位reCAPTCHA弹出适合在移动的屏幕内？

cclgggtu 于 2023-05-30 发布在其他

关注(0)|答案(1)|浏览(145)

我需要调试一个应用程序，问题是reCAPTCHA窗口，其中一个你必须选择几个图像从同一种放置有点奇怪的意思是，验证按钮是不是在可见的屏幕上，这意味着我不能从该页面进一步移动，因为我不能验证我选择的选项。
Html明智的，这是因为div容器有一个顶部的位置多一点，它应该是和它推动弹出屏幕外的方向下降。
我已经检查了reCAPTCHA documentation，但几乎没有提到如何定位弹出窗口。从这里，我猜它应该自动定位自己的正确方式，但在我的情况下，它肯定没有。
我提到这只会发生在像iPhone SE这样的小屏幕上，但对于iPhone 12来说，它工作得很好。我还提到，还有空间可以向上拖动弹出窗口，以便查看位于弹出窗口底部的验证按钮。
我应该如何处理这个问题？

css

来源：https://stackoverflow.com/questions/76320572/how-to-position-recaptcha-popup-fit-inside-the-mobile-screen

1条答案

按热度按时间

esyap4oy1#

有两种方法来解决这个问题。您可以使用position:fixed;或max-height：

位置固定

// Position the reCAPTCHA window relative to the viewport.
var recaptchaWindow = document.getElementById('recaptcha-window');
recaptchaWindow.style.position = 'fixed';
recaptchaWindow.style.top = '0';
recaptchaWindow.style.left = '0';

<div id="recaptcha-window" class="recaptcha-window">
  <div class="recaptcha-content">
    <div class="recaptcha-image"></div>
    <div class="recaptcha-buttons">
      <button class="recaptcha-verify">Verify</button>
      <button class="recaptcha-close">Close</button>
    </div>
  </div>
</div>

最大高度

<div id="recaptcha-window" class="recaptcha-window" style="max-height: 300px;">
  <div class="recaptcha-content">
    <div class="recaptcha-image"></div>
    <div class="recaptcha-buttons">
      <button class="recaptcha-verify">Verify</button>
      <button class="recaptcha-close">Close</button>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-05-30

我来回答

css 如何定位reCAPTCHA弹出适合在移动的屏幕内？

1条答案

相关问题

热门标签

最新问答