New Xpro modals overlapping content on the page, not able to click on links

[mikejcarton]

Im trying my best to explain this -

The new Modal elements in Xpro, they seem to still there when they are supposed to be hidden. It seems to be something to do with the form intergration.

For example, a Modal popup, the form is sitting in the middle of the screen over the top of the content although you can not see it, I am unable to click on certain links because this popup modal is there but invisible.

With this image here, the top left button ‘Call me back’ is the modal popup trigger, although as you can see it shows there even when the trigger has not been clicked. I cant click on the ‘facebook’ or ‘google’ image links. (try on mobile)

Same thing, I cant click on the links as the popup modal is there, although its supposed to be invisible and not showing at all until triggerd?

Hover your mouse over this section of the home page, this is the best example, why is there a link there? The modal form seems to be there although you cant see it!

Here is a 20 second video showing what I mean, you can literally type in the contact form but you cant see it… https://www.loom.com/share/eb98c6e58b2c45a4a0d9df87013860b8

[friech]

Hi Michael,

Thank you for writing in and for explaining the issue, but I can’t replicate it on my dev site, it could be something on your element configuration or on the Gravity form itself. It’s kind of hard to investigate inspecting only the front end. Can you provide us a login credential that has access to the page in Cornerstone, so we can try to replicate your elements on our dev site? (the one you provided above does not have access to page)

In the meantime, please do a Testing for Plugin Conflict, it could be a 3rd party plugin is causing this issue.

Cheers,

[mikejcarton]

Please try the login again, it now has full access.

Apologies.

[christian]

Hey Mike,

This issue seems to be a conflict with WPForms. The elements inside the modal should be hidden but WPForms has them visible. Maybe we can set all elements to hidden when the modal is active so I will post this case in our issue tracker if what I propose is a viable solution for our developement team.

For now, please TEMPORARILY add the following code in Theme Options > CSS.

.x-modal:not(.x-active) * {
  visibility: hidden !important;
}

I tested that code in my site and it works.

Just note that we can only provide a temporary solution if it can solve by simple means. This might not always be the case and we don’t provide custom codes as part of our theme support.

Hope that helps.