Search code examples
javascripthtmldialogrecaptcha

reCAPTCHA v2 with HTML Dialog .showModal() method

Google's reCAPTCHA v2 displays layering problems when included in a HTML <dialog> triggered with .showModal().

The challenge element with the question and the images is layered underneath the dialog instead of on top.

Try this demo in a browser which natively supports the HTML5 dialog, such as Chrome:

JSFiddle Demo

Broken reCAPTCHA in HTML5 dialog

The offending code is the document.body.appendChild(a.P) in the reCAPTCHA JavaScript, which appends the challenge div to the document body. I've thought about monkey-patching this to append to the dialog instead, but this is also not an ideal solution.

One workaround is to use the .show() method instead of the .showModal() method:

JSFiddle demo of a Workaround

Is there a more correct solution, that is less like a workaround?

Solution

  • Invoking the dialog using .show() and mimicking the styling of the .showModal() method seems to be the best solution for now:

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

    Unless Google updates reCAPTCHA for use inside <dialog>s, this is the cleanest solution I've come up with.