How to remove popups and overlays from website screenshots
Riley ThompsonSep 27, 20267 min read
Find out how easy it is to capture and share pixel-perfect screenshots at scale using Allscreenshots. Sign up for a free account and start integrating your first screenshot API call today.
RT
Riley Thompson
Developer advocate focused on web tooling, screenshot APIs, and helping teams ship better visual experiences.
You load a page in your browser and see the content you expected. Your automated screenshot runs a few seconds later and captures something else entirely: a newsletter form, a country selector, a survey, or a dark backdrop covering most of the page.
These interruptions are difficult to handle at scale because they are not all built the same way. Some appear immediately. Others wait for a timer, a network request, or a scroll event. Some live in ordinary HTML; others are rendered inside web components and shadow roots. The visible modal and its dimmed backdrop may even be separate elements.
AllScreenshots now handles these cases with a new API option: blockPopups.
Cleaner captures are now the default
Popup and overlay blocking is enabled by default. A basic request is enough:
If you prefer capture policies to be explicit in application code, include the option:
{"url":"https://example.com","blockPopups":true}
The same setting works across synchronous and asynchronous screenshots, bulk jobs, composed captures, schedules, website crawls, social images, and stealth captures.
What popup blocking targets
The feature focuses on page-level interruptions rather than ordinary content. Common examples include:
newsletter and subscription modals
promotional and discount offers
country, region, language, or currency selectors
survey requests
app-install promotions
browser-notification prompts
age-verification gates
dimmed backdrops and page scroll locks associated with those dialogs
The distinction matters. A footer that says “subscribe to our newsletter” is useful page content and should remain visible. A fixed newsletter dialog covering the article is an interruption and should be removed.
To make that distinction, AllScreenshots considers both meaning and presentation. An element needs interruption-related signals and dialog-like behavior before it is removed. The capture engine also watches for delayed additions and checks open shadow roots used by modern web components.
Why selectors alone are not enough
A CSS selector is still the most precise tool when you know the target website. For example:
That works well for one site. It does not scale cleanly when you capture customer URLs, crawl an unknown site, or maintain hundreds of monitored pages. Every site uses different names, and generated class names often change between deployments.
blockPopups provides the reusable first layer. Site-specific selectors remain available as a narrow fallback:
Full-page captures spend more time on a page and scroll through more content. That gives delayed marketing tools more opportunities to open a dialog. It also makes sticky backdrops and body scroll locks more disruptive.
The blocker stays active during rendering and performs another cleanup immediately before the output is created. This catches interruptions added after the first page load.
For a long or heavily client-rendered page, start with:
If important images are lazy-loaded, increase scrollInterval or add a short delay. Popup blocking and page-readiness controls solve different problems: blocking removes interruptions, while timing allows real content to finish rendering.
Apply one policy to an entire crawl
A crawler can encounter different popup systems on every page. Set blockPopups once and it applies to every rendered page:
That is useful for visual inventories, content migrations, competitive research, and documentation archives. The screenshots remain readable without maintaining a selector list for every page in the tree.
Know when to keep the popup
Sometimes the interruption is the subject of the screenshot. Disable blocking when you are:
testing a newsletter campaign
reviewing a regional routing experience
verifying an age gate
auditing exactly what a visitor saw
checking whether a promotion launches at the right time
{"url":"https://example.com","blockPopups":false}
The opt-out is part of the capture state and the screenshot cache key, so blocked and unblocked requests remain distinct.
For evidence workflows, consider archiving both versions: one raw capture with blockPopups: false and one clean capture for easier review.
Blocking versus clicking
Removing a dialog is appropriate when the underlying page already exists and the overlay merely covers it. Some gates do more: the content is not rendered until a user clicks a confirmation button.
Use blocking to reveal existing content. Use actions when the interaction itself changes what the application renders.
A practical troubleshooting order
If an interruption remains visible, work from general to specific:
Keep blockPopups enabled.
Add a short delay if the site opens the dialog unusually late.
Wait for a meaningful page selector with waitFor.
Add the popup container and backdrop to hideSelectors.
Use an interactive action if dismissal changes the page state.
This order keeps your configuration portable while still giving you precise control over unusual pages.
Fewer overlays, more useful screenshots
A clean screenshot pipeline should spend its effort capturing the page, not cataloging every popup vendor on the web. Default popup blocking makes first captures more reliable and keeps scheduled, bulk, and crawl outputs focused on the content you wanted.