HTML-элемент диалога скрывает всплывающее окно с невидимым вызовом.как это исправить? - PullRequest
Новая
       37

HTML-элемент диалога скрывает всплывающее окно с невидимым вызовом.как это исправить?

0 голосов
/ 11 июня 2019

https://codepen.io/adamchenwei/pen/agbPYJ доступ к примеру в режиме инкогнито, нажмите кнопку «Открыть», чтобы открыть образец формы входа, затем нажмите кнопку «Зарегистрироваться», чтобы вызвать вызов.Я не уверен, если это не решаемая проблема с использованием recaptcha внутри диалогового окна или это более исправимая вещь с каким-то взломом CSS и HTML?Пробовал z-index в диалоге, который вообще не работал ..

enter image description here

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

1 Ответ

1 голос
/ 11 июня 2019

Так вот вещь:

Если вы используете <dialog></dialog>, то по умолчанию оно скрыто.

Либо используйте <dialog open></dialog>, чтобы показать диалоговое окно при запуске, или откройте диалог через JS: 

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

ОДНАКО. элемент диалога не очень хорошо поддерживается, поэтому я бы очень советую НЕ использовать его.

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

Вы должны для этого изменить

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

до

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

Затем вы должны увидеть его во всех браузерах, и это поддерживаемый способ сделать это.

...