带有 HTML Dialog .showModal() 方法的 reCAPTCHA v2

Question

Google 的 reCAPTCHA v2 在包含在由

.showModal()

触发的 HTML5 对话框中时会显示分层问题。带有问题和图像的挑战元素位于对话框下方而不是顶部。

在本地支持 HTML5 对话框的浏览器中尝试此演示，例如 Chrome：

JSFiddle 演示

有问题的代码是

reCAPTCHA JavaScript

中的 document.body.appendChild(a.P)，它将挑战 div 附加到文档正文。我考虑过对其进行猴子修补以附加到

dialog

，但这也不是一个理想的解决方案。

一种解决方法是使用

.show()

方法而不是

.showModal()

方法：

JSFiddle 解决方法演示

有更好的解决办法吗？

Answer 1

使用

.show()

调用对话框并模仿

.showModal()

方法的样式似乎是目前最好的解决方案：

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

除非 Google 更新 reCAPTCHA 以在

<dialog>

内使用，否则这是我想出的最干净的解决方案。