带有HTML5 Dialog .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/

除非Google更新reCAPTCHA以便在<dialog>内使用，否则这是我提出的最简洁的解决方案。