Skip to main content

Preventing Popups

Newsletter signups, discount offers, "Download our app" prompts and similar popups interrupt customers inside the app - and often cover the page the app just opened. You can keep them on the website while stopping them inside the app.

Hiding popups with CSS​

The simplest option is to hide the popup with CSS scoped to the evlop-mobile-app-embed class. CSS also applies to popups that are added after the page loads, so it works for popups injected by third-party apps:

.evlop-mobile-app-embed .newsletter-popup,
.evlop-mobile-app-embed .discount-popup,
.evlop-mobile-app-embed .popup-overlay {
  display: none !important;
}

Replace the selectors with the ones your popup uses - right-click the popup in your browser and choose Inspect to find its class or id. Remember to also hide the popup's backdrop/overlay if it's a separate element.

Restoring scrolling​

Many popups lock page scrolling while they are open, usually by adding a class or overflow: hidden to <html> or <body>. If the page can't be scrolled in the app after hiding the popup, override the lock too:

html:has(.evlop-mobile-app-embed),
.evlop-mobile-app-embed {
  overflow: auto !important;
}

Closing popups with JavaScript​

Some popups can't be hidden with CSS alone - for example a native <dialog> opened with showModal() keeps the rest of the page unclickable even when it's hidden. In that case, close or remove the popup once it appears. Add this to your app-only script:

var popupSelector = '.newsletter-popup, dialog.discount-popup';

function closePopups() {
  document.querySelectorAll(popupSelector).forEach(function (popup) {
    if (popup instanceof HTMLDialogElement) {
      popup.close();
    } else {
      popup.remove();
    }
  });
}

closePopups();

// popups are often shown after a delay - close them as soon as they appear
new MutationObserver(closePopups).observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ['open', 'class', 'style'],
});
tip

If the popup comes from a third-party app, check its settings first - many popup apps let you exclude pages or devices, which is simpler than hiding it with code.