Home Forums Community Forum modal overlay conflict with convert plus

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • Geekyauntie
    Participant
    Post count: 3

    Hi,

    the recent avada update has resulted in a conflic in overlay. When I launched the modal pop up with youtube, the modal becomes unclickable. I suspected that the modal is calling the convert plus overlay.

    See https://kangenzui.com scroll down to the middle for the video demostration section. Clicking the modal results in a unclickable pop up.

    marklchaves
    Participant
    Post count: 675

    Hello @geekyauntie,

    It’s the z-index on your reCAPTCHA that’s conflicting. It’s set to 9999999999 (cray). I set it to 1 as a test and your video modal displays perfectly. See screen grab.

    https://imgur.com/a/mLpe3sA

    I think any value between 100-99997 will work better (1 works but is too low). Add this to your page’s custom CSS section. And, play around with the z-index as needed.

    
    /* Custom CSS to fix reCAPTCHA conflict with Avada modal. */
    
    .cp-recaptcha.cp-recaptcha-index-1.cp-recaptcha-index-2.cp-recaptcha-index-3.cp-recaptcha-index-4.cp-recaptcha-index-5.cp-recaptcha-index-6.cp-recaptcha-index-7 + div {
    
        z-index: 100 !important; /* Originally 9999999999 which blocked the Avada modal. */
    
    }
    
    

    How to add custom CSS

    https://theme-fusion.com/documentation/avada/how-to/how-to-apply-custom-css/

    P.S. The side affect is that the reCAPTCHA logo will disappear behind some of your page’s sections.

    Good luck!

    Geekyauntie
    Participant
    Post count: 3

    thanks! for helping

    SimonNWalker
    Participant
    Post count: 1

    This solution recently stopped working and we can’t work out why.
    We can still the settings from the above when we inspect the element, but it’s getting overridden again by second z-index of 9999999999!important; coming from modal.min.
    Unless we find another way to fix it, you can see it on this page by clicking the video half down the page.
    https://bentleybaths.talendev.com/george-bentley-provides-encouragement-during-coronavirus-outbreak/

    marklchaves
    Participant
    Post count: 675

    Hi @simonnwalker,

    This worked for me.

    
    .cp-recaptcha.cp-recaptcha-index-1.cp-recaptcha-index-2.cp-recaptcha-index-3.cp-recaptcha-index-4.cp-recaptcha-index-5.cp-recaptcha-index-6.cp-recaptcha-index-7 + div {
        z-index: 0 !important; /* Was 9999999999 !important; */
    }
    

    It’s a band aid though as you already might know. It would be nice to remedy this at the root.

    Good luck!

Viewing 5 posts - 1 through 5 (of 5 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.