Content Area Modal Not Visible

[dave_hicks]

Hi,

I have added some Content Area Modals within Pro and they show fine. However on the site itself, they seem to be hidden. I am on all latest versions.

Ant help welcome!

Thanks,

Dave.

[paul.r]

Hi Dave,

I checked your account and there many sites listed. I can’t seem to find which one.

Can you provide us the exact url of the page where we can see the issue, so we can check.

Thanks

[dave_hicks]

Hi Paul,

The url is:

https://www.hydrapart.com/hydra-part-control-valves/

Please see image for modal…

Thanks for your help!

Dave.

[paul.r]

Hi Dave,

You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If that doesn’t help, please provide us your wordpress admin login in Secure Note so we can take a closer look

@Themeco1

###Secure Notes

It is very common to need to share sensitive information with our staff such as login or FTP information. In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.

[dave_hicks]

Hi Paul,

Just a quick note…

it’s weird that the modal in the header works fine??

Dave.

[rad]

Hi Dave,

It’s weird and I can’t find what’s causing it, but it appears its opacity is zero. Please add this CSS to Theme Options > CSS

.x-modal {
opacity: 1 !important;
}

It should automatically switch from 0 to one, but it’s not.

Thanks!

[dave_hicks]

Hi Rad,

Seems to have worked in a fasion…there is some odd movement when the modal opens and it does not show on mobile. Neither does the nav-modal.

It’s all really odd!!

Dave

[rad]

Hi Dave,

Upon further checking, I found out that there are malformed HTML content on that page, you can check it here https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.hydrapart.com%2Fhydra-part-control-valves%2F

Example,

It supposed to be

<div style="padding: 2emx; line-height: 1.4; text-align: center;"><h3>Please Enter Your Details Here</h3></div>

<div>[contact-form-7 id="161" title="Reseller Contact Form"]</div>

I went ahead and corrected it, it’s working now.

But there are still a lot of malformed content, example,

And I’m not sure where they are added. It seems to be pointing on other forms of a pop up plugin. Please fix them

A pair of open and closing tag should be implemented for <div></div>, <span></span>, <p></p> and more.

Thanks!

[dave_hicks]

Hi Rad,

Thank you very much for all your help!

In respect of the the bad code within the pop-ups, I am removing them and replacing them with the modals. That is why I needed the modal to work properly!

Once again, thank you very much for your hard work!

Dave.

[ruenel]

You are most welcome!
We’re glad we were able to help you out.