Popup shows in footer after accepting

I found a way to hide it until this is resolved…

Basically the HTML code for the popup is still output to the page. But the inline styles to make it popup up in the middle, like position fixed, is not output. So something in the plugin knows its not supposed to show as the CSS is not output. But the HTML code is still there on the page, so its unstyled in the footer.

So what I did was, in my own custom CSS I use to style the box, I added the following:

.tbrightcontent
{
    position: absolute;
    top: -99999px;   
}

Then when the popup is supposed to show, its own CSS overrides this, and so it shows.

But when the popup is not supposed to show, because it is not showing its own CSS, my custom CSS above will be used and so its hidden off screen.

Its not the best, but until this is fixed its the only thing I can think of.

For info, it seems to come back after the following process:
1) Load the page
2) Accept the terms
3) Reload the page using browser reload button by just clicking a link to home, or hitting enter after the address in the browser – not a browser reload (but not using Cmd + R on mac for example)

@amityweb Thanks for taking the time to look into a solution. I don’t have access or experience with WP Rocket so I’m going to be shooting in the dark a bit here.

When you use the “Load Popups with JavaScript” option, the actual content of the popup shouldn’t load until after the page is initially rendered. If you see the actual popup content (the text and not just the HTML structure) appear in your page’s source code then something strange might be going on with a cache or plugin conflict.

I did just check the site and the popup, on the home page and internal pages, isn’t re-appearing for me after I hit the accept button. No matter how many times I tried to reload it. Deleting the cookie brought it back as expected.

Any chance you only experience this when you are actively logged in to the WordPress admin?

It wont show now, due to my code, but you can see the HTML in the code at the bottom.

No it happens on private mode also, not logged in.

The customer reported it to me, and I repeated it, so its not just me.

I can replicate every time in Chrome as follows (check the HTML code as I am hiding it visibly):

1) Load the page
2) Accept the terms – when the page reloads, the code is not appearing
3) Reload the page not using browser reload button – the best way is just click on the logo in the top left to go to the home page

The tfade and tlight elements appear in the HTML in the footer.

• This reply was modified 3 years, 8 months ago by amityweb.

Sorry, I misunderstood. I see what you are saying now. It’s even stranger because it appears to be hit or miss on whether or not even the popup shows after I tested things out some more. I had it appear on some internal pages/articles and not on others.

My hunch is there is a conflict with WP Rocket but I can’t swear to it because I just don’t know how their plugin works. I hate to say it but if you don’t like your CSS hack you might want to look into another option.

Thanks for your reply.

I am a bit concerned by the last statement. Are you suggesting you are not going to look into it? So basically, your plugin does not work with caching, even though the Javascript option is enabled?

For info, if your plugin inserts code via Javascript, then it will work with caching, I have created several plugins that need to show content based on geo location and so using Javascript to inject the code means it works OK.

I do think you need to make sure your plugin works for caching plugins. I see too many lazy developers who say “dont use caching plugins” (because they cant be bothered to make their code work right) which is unbelievable to be honest.

Thanks

Hi amityweb, I seem to be having a similar or related problem. After accepting the terms, some, but not all, of my pages just show the agree / disagree buttons. It’s totally random – different browser, different computer, results in the buttons appearing on different pages.

Are you using a premium version that allows you to style the pop-up? I wanted to style the pop-up by adding css to my Divi Child style.css file, but none of the changes materialized – I assumed it was something to do with using the javascript option.

Having said that, I am using SGOptimizer, which is siteground’s local caching plug-in, and I use CloudFlare for CDN (i.e. more caching). And I have been having a really hard time these days with updating my site because it seems totally random which changes come through immediately and which take a few hours to show up – I do use the usual tricks of adding /?1 to the address, or ctrl – shift – r to reload the page.

No we’re not using a premium version. You don’t need that to style with your own css. If you can see HTML being output then you can style it in your CSS. Unless the plugin is adding its own CSS after yours using !important in them then you can’t override it. But this plugin was fine to style.

It’s probably your cache system and your changes are not showing yet. Try flushing all caches. Both SG and Cloudflare. Both will be caching the css file. If you’re making changes often then put Cloudflare in development mode.

Better yet, add a version number to the css in your enqueue_scripts function and every time you make a change just increment the version number and SG and Cloudflare will think it’s a new file and load it. I do this all the time, it’s much easier than flushing cache every time you edit the css.

• This reply was modified 3 years, 8 months ago by amityweb.
• This reply was modified 3 years, 8 months ago by amityweb.
• This reply was modified 3 years, 8 months ago by amityweb.
• This reply was modified 3 years, 8 months ago by amityweb.

Thanks for the suggestions! When you don’t do this professionally it is great to get help from the community.
Today, I downloaded and installed Pop-Up Maker plugin – they don’t make it obvious, but there is a free version that does everything I want, especially being able to style every aspect of the pop-up. So, now my pop-up matches the rest of the site’s branding.
It works perfectly – doesn’t leave buttons lying around all over the place! In addition, they make a point of saying that web crawlers get passed through the pop-up (which I assume this one does too, but who knows?).
There is only one button, but for a basic terms pop-up that’s all you need.
Best of luck!