Search code examples
javascripthtmlauthenticationmodal-dialogrecaptcha

reCAPTCHA 'challenge' does not show up in same div as v2 checkbox


I am using a modal popup to contain my reCAPTCHA (grecaptcha.render method). I assumed that the 'challenge' box would also be placed in this same div because I do not see a separate parameter under the g-recaptcha tag attributes, grecaptcha.render parameters or JavaScript API (https://developers.google.com/recaptcha/docs/display#render_param). Obviously, my assumption was wrong (see screenshot). I am not finding any references to this in my (many) searches. Am I missing something or is this just not possible (meaning the reCAPTCHA API does not support?). I would appreciate knowing how to get the 'challenge' to appear in the same div as the checkbox.

Screenshot showing challenge window BEHIND modal div


Solution

  • The challenge box is rendered into a separate fixed positioned div which has another iframe of its own. make sure that modal popup z-index is lower than the challenge box div.