reCAPTCHA 'challenge' shows up BEHIND modal DHX Confirm Message Box

Suite and Optimus Suite 7
#1

I am using a DHX Confirm Message Box to contain my reCAPTCHA (grecaptcha.render method). I assumed that the ‘challenge’ box would also be placed in this same div container 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). Because I can’t change the z-index of the iframe launched by the Google recaptcha (at least, I don’t see how), the only way I am seeing to overcome this obstacle is to change the z-index of ALL the elements ‘in-front’ of the ‘challenge’ box. So that means changing the z-index for the dhx_alert__overlay (the modal), the dhx_alert (the dialogue box), and - in my case - the dhx_popup–window that is under the alert box.

Is this the right way to go about doing this or is there another way? Thank you.

image
image751×671 126 KB

#2

I have found the z-index css for the alert dialog box but the alert modal overlay initiates its own div. How do I set the z-index for the modal overlay (see screenshot)?

image
image762×55 5.76 KB

The only way I can find to set the z-index for a DHX modal alert (generated div) is to use:

document.getElementsByClassName(“dhx_alert__overlay”)[0].style.zIndex = 1147483646;

Is there another way that is direct through css?

#3

It’s been 7 days without any input from the DHX Community of Experts. I would appreciate hearing from anyone who may have more expertise in this area than I do. While the above code is working, I don’t want to assume it’s the best way to go about this. Thank you.

#4

You may define a needed z-index using a css:

.dhx_alert__overlay{
z-index: 1147483646
}

You can also define a needed z-index for your captcha a similar way.