javascript - 带有 HTML5 对话框 .showModal() 方法的 reCAPTCHA v2

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/

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