Question

https://codepen.io/adamchenwei/pen/agbPYJ 在隐身模式下访问示例，单击“打开”按钮以打开示例登录表单，然后单击“注册”按钮以触发挑战。我不确定在对话框中使用Recaptcha是否是一个不可修复的问题，还是使用CSS和HTML的某种形式的可修复性？尝试在对话框上使用z-index，这根本不起作用。

HTML

<div id="app">
  <div class="container my-4">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <h2 class="text-center mb-4">
          Sign Up Form with Google reCAPTCHA
        </h2>
        <dialog ref="mydialog">
          <form
              method="post">
          <div class="form-group">
            <input 
                   type="email" 
                   name="email" 
                   class="form-control" 
                   placeholder="Enter your e-mail address"
                   required />
          </div>
          <div class="form-group">
            <input 
                   type="password" 
                   name="password" 
                   class="form-control" 
                   placeholder="Enter your password"
                   required />
          </div>
          <div class="form-group">
            <vue-recaptcha
              ref="recaptcha"
              size="invisible"
              :sitekey="sitekey"
              @verify="register"
              @expired="onCaptchaExpired"
            />
            <button 
                    type="submit" 
                    class="btn btn-primary btn-block"
                    @click="validate">
              Sign Up
            </button>
          </div>
        </form>
        </dialog>
        <button @click="openDialog">open</button>
      </div>
    </div>
  </div>
</div>

JS

new Vue({
  el: '#app',

  components: { VueRecaptcha },

  data () {
    return {
      email: null,
      password: null,
      recaptchaToken: null,
      sitekey: '6Lfe33gUAAAAAMCuDwRfhSUV4sGkqGDaGrKqjkmZ'
    }
  },

  methods: {
    openDialog() {
      this.$refs.mydialog.showModal();
    },
    register () {
      // make post request to the server
    },

    validate () {
      // if validate true exec recaptcha
      this.$refs.recaptcha.execute()
    },

    onCaptchaExpired () {
      this.$refs.recaptcha.reset()
    }
  }
});

Answer 1

那么这件事：

如果您使用<dialog></dialog>，则默认情况下它是隐藏的。

使用<dialog open></dialog>在启动时显示对话框，或通过一些js打开对话框：

// Update button opens a modal dialog
    updateButton.addEventListener('click', function() {
      dialog.showModal();
    });

但是。对dialog元素的支持不是很广泛，所以我会真的建议您不要使用它。

https://caniuse.com/#feat=dialog

您应该为此进行更改

<dialog class="my-dialog"></dialog>

到

<div class="my-dialog"></div>

然后您应该在所有浏览器中看到它，这是支持的方法。

html对话框元素掩盖了不可见的Recaptcha挑战弹出窗口。如何解决这个问题？

1 个答案: