Multiple Modals Being Created from a Single Element

[SJF_me]

When adding a “Modal” element into our page, it creates 3 total (so, 2 duplicate) bits of markup for the modal, as you can see in the screenshot:

Please ignore the “cannot load form” error, it is irrelevant to the issue, because I was also able to duplicate this issue on a new page, which I will include both links in a private note, along with credentials for you to tinker around with (do whatever you need to in there since this is just our staging environment).

[tristup]

Hi @SJF_me,

Thanks for reaching out.
I have checked your website and found the mentioned issue. There might be some different reasons behind your issue, I would like to suggest troubleshoot the following common issue to help us to recognize the reason.

1.Plugin Conflict
2.Theme Update related issue
3.Child Theme Related issue
4.CSS/JS Customization
5.Disabling Cache

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If none of the above helps and you are still getting the issue, please copy your live site to a staging server so we could troubleshoot freely without breaking your live site.
And give us access in the secure note including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[SJF_me]

@tristup

please copy your live site to a staging server so we could troubleshoot freely without breaking your live site.

Yes… I already did this, and it looks like you (or someone at themeco) has already logged in and modified the post:

Again, please feel free to do what you want since, as previously mentioned, this is the staging environment.

I’ve confirmed that the issue goes away when disabling either of these plugins: “Yoast SEO” or “Easy Table of Contents”. However, how do we know the conflict is directly coming from their end and not Themeco’s? If I go to them they will probably say they don’t support conflicts either, so… what then?

It’s odd because we have the same exact element in our header as well, without any issue (click the Live Demo button to see for yourself)

What can we do to fix this bug / conflict?

[friech]

Hi Scott,

Yes, I can replicate this conflict with “Yoast SEO”, unfortunately, we can’t provide a fix for this right now. I need to submit this to our issue tracker so the developers will be made aware of it.

Thank you for understanding,

[SJF_me]

Just in case anyone else stumbles upon this with the same issue, we have a bandaid fix that works for now, but it is definitely not a permanent solution.

.x-modal.x-active:not(.live-demo-btn){ display: none }
footer + .x-modal.x-active:not(.live-demo-btn) { display: initial }

This hides all active modals initially, and then shows the first active modal in the footer.

From our tests, this works with modal elements in the page builder (rather than the header builder), so adding a class to the modal in the header, and adding :not(.headerModalClassName) seems to work.

[marc_a]

HI Scott,

We’re glad that you’re able to find an alternative solution to your issue and thanks for sharing your temporary solution. If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.