Contact Us

How to Block Sticky Pop-Ups With CSS and JavaScript Without Creating Poor Mobile Experiences

·

by

David Turner

Block sticky pop-ups by targeting bad behavior, not every overlay on the page. The goal is simple: remove sticky ads, newsletter nags, coupon bars, and full-screen interruptions while keeping useful UI intact, especially on phones where screen space is already tight.

TLDR: Use CSS for simple visual blocking and JavaScript for smarter removal when pop-ups are injected after the page loads. For example, if analytics show that 38% of mobile users close a newsletter modal within two seconds, hide it on small screens and replace it with a quiet footer link. A shopper on a 390px-wide phone should not lose half the screen to a “10% off” box while trying to tap checkout. Block the interruption, not the task.

Why sticky pop-ups are worse on mobile

Sticky pop-ups feel annoying on desktop. On mobile, they can make a site close to unusable. A fixed banner that takes 120 pixels may sound harmless, but on a phone it can cover product filters, cookie buttons, chat icons, or the “Add to cart” button.

The real trouble starts when several scripts compete for attention. A cookie notice sits at the bottom. A chat bubble floats above it. A newsletter modal appears in the center. Then a sale banner sticks to the top. Honestly, it feels like the page is arguing with the user instead of helping them.

That is why a good blocking strategy must be selective. If you simply hide every fixed element, you may break headers, cart buttons, accessibility controls, or legal notices. The smarter path is to identify patterns common to intrusive pop-ups and handle them with care.

First, decide what should be blocked

Before writing CSS or JavaScript, list the pop-up types you want to suppress. This helps avoid accidental damage.

  • Usually safe to block: newsletter modals, coupon wheels, app install banners, sticky promo bars, exit intent pop-ups.
  • Block with caution: chat widgets, cookie banners, age gates, location prompts, paywall notices.
  • Do not blindly block: login dialogs, checkout confirmations, security warnings, consent tools required by law.

The best rule is practical: if the element blocks reading, tapping, scrolling, or buying, it needs a less aggressive version on mobile.

Use CSS for predictable sticky elements

CSS is the cleanest option when sticky pop-ups use known classes, IDs, or roles. It loads fast and does not wait for scripts to run. For your own site, create a small mobile-first override.

@media (max-width: 768px) {
  .newsletter-modal,
  .promo-popup,
  .sticky-coupon,
  .exit-intent-offer {
    display: none !important;
  }

  body.modal-open {
    overflow: auto !important;
  }
}

The second rule matters. Many pop-ups add a class to the body that disables scrolling. If you hide the modal but leave overflow: hidden, users may stare at a page that looks normal but refuses to move. That tiny bug can waste 10 seconds before someone gives up.

You can also reduce the damage instead of removing the element. This is often better for your own campaigns.

@media (max-width: 768px) {
  .promo-banner {
    position: static;
    font-size: 14px;
    padding: 8px 12px;
  }

  .promo-banner .large-image {
    display: none;
  }
}

This keeps the offer visible without pinning it to the viewport. Less drama. More usable screen space.

Use JavaScript for pop-ups injected after load

Many sticky pop-ups come from third-party scripts. They may appear two or three seconds after the page loads, so CSS alone may not catch everything. JavaScript can watch the page and remove matching elements as they appear.

const badPopupSelectors = [
  '.newsletter-modal',
  '.promo-popup',
  '.sticky-coupon',
  '[data-popup="email"]',
  '[aria-label*="newsletter" i]'
];

function removeBadPopups() {
  badPopupSelectors.forEach(selector => {
    document.querySelectorAll(selector).forEach(el => {
      el.remove();
      document.body.style.overflow = '';
      document.documentElement.style.overflow = '';
    });
  });
}

removeBadPopups();

const observer = new MutationObserver(removeBadPopups);

observer.observe(document.body, {
  childList: true,
  subtree: true
});

This pattern is useful because it reacts to late pop-ups. The MutationObserver watches for new nodes and removes only the selectors you define. Keep the selector list tight. A broad selector like div[style*="fixed"] can break harmless UI.

Detect mobile screens without punishing tablets

A common mistake is treating every device the same. A sticky offer may be fine on a 1440px desktop screen. It can be awful on a 360px phone. Use screen width, pointer behavior, and available height to make better choices.

const isSmallTouchScreen =
  window.matchMedia('(max-width: 768px)').matches &&
  window.matchMedia('(pointer: coarse)').matches;

if (isSmallTouchScreen) {
  removeBadPopups();
}

This checks for small touch screens, not just small browser windows. It is not perfect, but it is safer than user agent sniffing. User agent checks are brittle and annoying to maintain.

Replace pop-ups with calmer mobile patterns

Blocking does not always mean deleting the offer. If the message matters, present it in a way that does not hijack the page.

  • Use an inline block: Place the signup form between sections of content.
  • Use a footer link: Add “Get 10% off” near the bottom of the page.
  • Use a small dismissible bar: Keep it short and avoid covering key buttons.
  • Wait for user intent: Show the offer after a tap on “Deals” or “Subscribe.”
  • Respect dismissal: Store the close action in localStorage for at least a few days.
const dismissed = localStorage.getItem('promoDismissed');

if (!dismissed) {
  document.querySelector('.mobile-promo-bar')?.classList.add('show');
}

document.querySelector('.promo-close')?.addEventListener('click', () => {
  localStorage.setItem('promoDismissed', 'true');
});

It drives me crazy when a site asks for my email on every single page after I already closed the box. Remembering the dismissal is basic courtesy.

Protect accessibility while blocking pop-ups

Bad pop-ups often trap focus, hide page content from screen readers, or place the close button outside the visible area. When you remove one, clean up the side effects too.

  • Remove classes such as modal-open from body.
  • Restore overflow on html and body.
  • Remove lingering backdrops such as .modal-backdrop or .overlay.
  • Return focus to useful content, such as the main heading or product title.
function cleanupAfterPopup() {
  document.body.classList.remove('modal-open');
  document.body.style.overflow = '';
  document.documentElement.style.overflow = '';

  document.querySelectorAll('.modal-backdrop, .popup-overlay')
    .forEach(el => el.remove());

  document.querySelector('main')?.focus?.();
}

If you focus main, add tabindex="-1" to it. That lets JavaScript focus the region without adding it to the normal tab order.

Test the messy cases

Blocking sticky pop-ups sounds simple until real phones get involved. Test portrait and rotated views. Test Safari on iOS and Chrome on Android. Open the keyboard in a form field. Scroll to the bottom. Add a product to the cart. Try a checkout step.

Watch for these failures:

  • The page stops scrolling after the pop-up is hidden.
  • A fixed header covers the first line of content.
  • A cookie notice remains hidden but still blocks taps.
  • A removed pop-up leaves a gray backdrop behind.
  • The close button is too small to tap.

Measure before and after

Do not guess if your blocking strategy worked. Track mobile bounce rate, scroll depth, form starts, checkout taps, and rage clicks. If removing a sticky newsletter modal raises product-page scroll depth from 42% to 61%, that is a strong signal. If email signups fall by 2% but purchases rise by 9%, the trade may be worth it.

The aim is not to wage war on every pop-up. The aim is to stop interruptions from stealing the page. Use CSS when the target is stable. Use JavaScript when scripts inject elements late. Keep mobile rules stricter than desktop rules. Above all, give users room to read, tap, and finish what they came to do.