PopUp Overlay shows wether activated or not

Hello,

Thanks for reaching out! 

It looks like the overlay is getting stuck due to an issue that could be related to our update and the way we manage the CSS. Since you’ve already cleared the cache and regenerated the CSS and data, let’s explore some additional steps to fix this issue:

1. Ensure that your theme is fully compatible with the latest version of Elementor. Sometimes, theme CSS might override Elementor’s settings.
2. Temporarily deactivate all plugins except for Elementor. Then, check if the issue persists. If the error goes away, re-activate plugins one by one to identify which plugin may be causing the conflict.
3. Temporarily switch to a default theme like Hello Elementor or Twenty Twenty-One. If the issue resolves, the problem might be related to your theme.
4. Open the popup on your site and inspect it using the browser’s developer tools (right-click > Inspect). Look for CSS that forces the overlay to stay active. Check the popup container class and see if there are any styles (like display: block or z-index) that shouldn’t be there.

If the issue started after a specific update, try rolling back to a previous version of Elementor that worked fine (Elementor > Tools > Version Control > Rollback).

Also you can go to the section/widget where you’ve applied the “Zoom In” effect and review its settings. Verify the duration and scale values (under the Advanced > Motion Effects section). If the scale is too large, adjust it to a more subtle value (e.g., around 1.05–1.1 for a light zoom effect).

I hope this helps you to solve the problem. Let me know how these steps go, and if needed, we can dive deeper into specific aspects of the setup.

1. I’m using a child theme (without alterations) of the Hello theme!
2. Can’t deactivate all plugins, due to data handling of Custom fields which manages 90% of our pages, but will try to see which ones can be deactivated.
3. See 1.
4. I did and I can uncheck the overlay background but can’t use custom css with the popup to make ti dissapear. ;(
5. That might be the only way but it will mean I won’t be uptodate – I like to stay updated, especially for security reasons

PopUp is .dialog-type-lightbox?and has background set to rgba(0, 0, 0, .8); but shouldn’t even be there

Yes it’s happening to all my websites as well. I’m on the very latest updates for both free and pro.

FYI, @sringnan

ok , I’ve worked out that my SiteGround optimizer caching plugin is causing the issue. When deactivated, the popup overlay doesn’t show and is honouring the hidden status. As soon as I reactive it, the overlay reappears.
im know trying to work out what exception rule to put in place on that plugin. If I work it out, I’ll reply back here.

thank you, @pixelkituk much appreciated.

@thegentatwpforum, OK so it’s the combine css files that seems to be the issue. If I deactivate that part of the caching plugin then it works. However, I don’t want that to be completely disabled, so it would mean excluding the correct css file, which I don’t have the time to work out at the moment.

As I have a lot of popups on one of my websites, and with some of these popups I want the overlay, and with one I don’t.

As a result I have used the css class you identified. If you don’t want the overlay on any of your popups then add this to your site settings custom css:

.dialog-type-lightbox {
background-color: rgba(0, 0, 0, 0) !important;
}

However, if you just want to target one popup, find the shortcode for that popup and add this to the popup page settings, advanced custom css:

div#elementor-popup-modal-353.dialog-type-lightbox {
background-color: rgba(0, 0, 0, 0) !important;
}

353 being the id for a specific popup.

Now I know what you are going to say, this is a work around and that lightbox shouldn’t have the background color or it should be transparent if the status is hidden.

I have a topic in the global elementor Facebook community group, and speaking with the admin there. So I will bring this to his attention, as this shouldn’t be happening, and maybe he can escalate it to the dev team. I say this because one of my site has the exact same caching plugin, with the same settings, and same versions of elementor/pro, and this isn’t happening on that site!!! Which is weird, and so I’m not sure if the culprit is elementor or caching plugin.

Cheers,

@thegentatwpforum, so someone else on the the Facebook group posted an issue with the text in the light box being very pale, and that regardless of him changing the colours in the light box site settings it remained a certain colour. He logged a ticket with Elementor support who confirmed it was a bug, and gave him some css with colour !important a a temporary fix.

I’ve subsequently copied that post link and this post link into my Facebook post and have asked the admin to review if there a general bug with light box, and to pass it to the devs to confirm.

Fingers crossed. ??

Thank your for the reply and for taking action, I’ll stay tuned. Much appreciated, @pixelkituk

FYI. To add a data point. I experienced the exact same behavior with my Elementor Pro pop-up. Disabling combine css in WP-Optimize has fixed the issue for now.