reCAPTCHA v2 with HTML5 Dialog .showModal() 方法

Question

Google 的 reCAPTCHA v2 在包含在由 .showModal() 触发的 HTML5 对话框中时显示分层问题。带有问题和图像的挑战元素位于对话框下方而不是顶部。

在 a browser which natively supports the HTML5 dialog 试试这个演示，例如 Chrome:

Demo

违规代码是 the reCAPTCHA JavaScript 中的 document.body.appendChild(a.P)，它将质询 div 附加到文档正文。我考虑过猴子修补它以附加到 dialog，但这也不是一个理想的解决方案。

一种解决方法是使用 .show() 方法而不是 .showModal() 方法：

Workaround

有更好的解决办法吗？ @google reCAPTCHA 本身可以解决这个问题吗？

Answer 1

使用 .show() 调用对话框并模仿 .showModal() 方法的样式似乎是目前最好的解决方案：

http://jsfiddle.net/karlhorky/b3hjdqeL/9/

除非 Google 更新 reCAPTCHA 以便在 <dialog>s 中使用，否则这是我想出的最干净的解决方案。