QAlaunch

Elementor popup won’t close on mobile

An Elementor popup that will not close on phones is most often caused by separate entrance or exit animations set for tablet or mobile, which can make the close action fail with a console error. The other common causes are a popup taller than the screen that pushes the X out of view, and custom CSS that hides the close icon. Remove the device-specific animations, set the popup height to fit content on mobile and check that the close button is shown inside the popup.

Opens your site in a real browser on desktop and phone. Free, about two minutes, no signup. Full report from $19.

What you'll see

A newsletter or offer popup appears on a phone and the visitor cannot get rid of it. The X does nothing, is missing, or sits above the visible area. Tapping the dark overlay does nothing either, so the page behind is unusable and most visitors simply leave.

Why it happens

1. Device-specific animations break the close action

Setting a different entrance or exit animation for tablet or mobile in the popup’s responsive settings is a known trigger: the popup opens, but closing it throws a JavaScript error and the overlay stays.

2. The close button is hidden or outside the box

In Popup Settings the close button can be hidden, or positioned outside the popup. On a narrow screen an outside position can land off the edge of the viewport where no one can reach it.

3. Content taller than the screen

A fixed popup height, or content that is taller than a phone screen, pushes the top of the popup and its X above the visible area, and the popup itself may not scroll.

4. Overlay closing is turned off

With “Prevent Closing on Overlay” and “Prevent Closing on ESC Key” enabled, the X is the only way out. If that one control breaks, the visitor is stuck.

How to fix it

  1. Go to Templates > Popups, edit the popup and open the Advanced or Motion Effects settings on the popup and its main container. Clear any tablet- or mobile-specific entrance and exit animations, keep only the desktop value, update and retest on a phone.
  2. Click the gear icon for Popup Settings, then the Style tab and the Close Button section. Make sure the button is shown, set its position inside the popup, and give it a colour that contrasts with the background.
  3. In the same Layout settings switch to the mobile view and set the height to Fit to Content, with a maximum width that fits a 360px screen.
  4. Under Popup Settings > Advanced, untick “Prevent Closing on Overlay” and “Prevent Closing on ESC Key” so visitors have a second way out.
  5. Search Appearance > Customize > Additional CSS, the theme options and Elementor’s Custom CSS for rules that target .dialog-close-button or an icon class with display: none or visibility: hidden.
  6. Review the popup’s Triggers and Conditions. Firing a full-screen popup the moment a page loads on mobile is the kind of intrusive interstitial Google’s guidance warns against, so prefer a scroll or exit-intent trigger, or a smaller banner on phones.

How to check it's fixed

  • At 360px wide and on a real phone, trigger the popup and tap the X. It should close and the page should scroll again.
  • Trigger it again and tap the overlay outside the box, which should also close it.
  • Watch the console while closing and confirm no error appears.

What a QAlaunch scan shows for this

  • Phone-width screenshots where the visual review flags an overlay covering most of the screen or a close control that is missing or cut off.
  • JavaScript console errors on the page, including the error thrown when the close action fails.
  • A primary call-to-action that cannot be reached because something sits on top of it.
  • The scan only sees popups that appear on page load; one triggered by scrolling or exit intent may not show up.

See exactly what a full report contains in the sample report.

Frequently asked questions

Why does the popup close fine on desktop?

Desktop uses the base animation settings, which work. The bug appears only when Elementor applies a separate tablet or mobile animation, which is why removing those values is the first fix to try.

Will a popup that cannot be closed hurt SEO?

Google’s guidance treats popups that cover the main content on mobile as intrusive interstitials, which can count against the page. More immediately, visitors who cannot close it leave.

Should I just hide the popup on mobile?

In the popup’s Advanced settings you can show it only on certain devices. That is a reasonable stopgap, but fix the close button too so a future layout change does not trap visitors on tablets.

Done for you · not automated

Rather have a QA engineer test it by hand?

If this is a site you're launching or handing to a client, I'll go through it by hand, including the WordPress-specific issues a scan can't reach, like logged-in flows.

$299one-time · 3 business days
  • Up to 10 key pages tested by hand, not a scan
  • Every flow a customer uses: forms, sign-up, checkout, booking
  • Real mobile and desktop browsers
  • A written report in plain language, with screenshots
  • A 15-minute call to walk you through it
  • 10 years of professional QA experience

Tell me about your site and I'll reply personally, usually the same day.

No payment now. I'll confirm scope and price first.

More for WordPress: all WordPress fixes · WordPress testing · why WordPress breaks after updates · why contact forms fail silently

Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.

Sources: Element.how: Elementor popup problems · XTemos forum: promo popup not closing