Google reCaptcha验证弹出窗口无法在Mat对话框中正确显示

Question

我以角材料对话框形式添加了Google reCaptcha。但是，当reCaptcha打开验证弹出窗口时，它会显示在表格上方，如图所示。

我还发现，每当打开Mat对话框时，都会在html标签中添加负边距。 如果我删除了边距，则验证码验证弹出窗口会放在正确的位置，但随后垫对话框将无法正确显示。我很困惑如何将两个弹出窗口放置在正确的位置。

Answer 1

这不是最好的方法，但是仍然可以。 您可以使用top: 0 !important;创建一些CSS类，并在用户在材质对话框中单击ReCaptcha时将其应用于标签。 并且不要忘记在完成ReCaptcha验证或关闭对话框后从该类中删除该类。

Answer 2

我只是在那个时候解决了问题（有点黑客），但在等待适当的解决方案。

人们问我为什么要在弹出窗口中添加验证码，所以伙计们对产品的要求不能更改。

所以我做了什么，当我更改html标签中的材质对话框设置的边距时，检查了验证码挑战弹出窗口，如下所示。

checkForChallengePopup() {
    const html: HTMLElement = this.document.getElementsByTagName('html')[0];
    this.challengePopup = this.document.querySelector(`[title='recaptcha challenge']`);
    if (this.challengePopup) {
      this.challengePopup.parentElement.style.top = html.style.top.replace('-', '');
    } else {
      setTimeout(() => {
        this.checkForChallengePopup();
      }, 3000);
    }
  }

是的，它一直在检查挑战弹出窗口，直到没有关闭主对话框，这样有点脏但可以解决问题。

Answer 3

在启动登录对话框之前立即致电window.scrollTo(0, 0)