How to Capture a Website Screenshot with a Modal Dialog Open in Chrome

To capture a website screenshot with a modal open in Chrome, open the page-rendered modal first, then use Chrome DevTools to capture the visible viewport, the full page, or a selected area. For a modal that is part of the webpage, this captures the state you see. A browser-managed JavaScript alert, confirm, or prompt is different: Chrome documents separate handling for those dialogs, but the cited screenshot documentation does not promise that they appear in a page screenshot.

Choose the right capture

What you need	Chrome DevTools option
What is visible now, including the open modal	Capture screenshot
The whole page, including content below the viewport	Capture a full size screenshot
A specific rectangle around the modal	Capture area screenshot

These options apply to a modal rendered in the page. If the dialog is a native browser prompt, check the resulting image rather than assuming it was composited into the page capture. Chrome’s DevTools Protocol documents page screenshot capture separately from handling JavaScript dialogs. Chrome DevTools Protocol: Page domain.

Capture the modal in Chrome DevTools

1. Open the page in Chrome and trigger the modal. Wait for its final visual state, including any animation, image, or content load.
2. Open DevTools using Chrome’s menu or the keyboard shortcut for your operating system.
3. If you need a particular responsive size, toggle the Device Toolbar and set dimensions or choose a device preset.
4. In the Device Toolbar, open More options and choose Capture screenshot for the current viewport, or Capture a full size screenshot for the entire page.
5. Open the downloaded image and confirm that the modal is visible and positioned as intended.

Chrome’s Device Mode approximates mobile rendering; it does not run the page on a physical mobile device. You can add a custom device in DevTools settings when you need an unlisted viewport. See Simulate mobile devices with Device Mode and DevTools device settings.

Capture only an area around the modal

1. Open the DevTools Command Menu.
2. Type screenshot.
3. Choose Capture area screenshot.
4. Drag over the modal and any surrounding context you want in the image.

Area capture does not work when DevTools is undocked. If the command is unavailable or selection does not start, dock DevTools and try again. The steps and limitation are documented in Chrome’s Command Menu guide.

Get a consistent modal state

• Wait for the intended state. Trigger the modal and allow transitions and asynchronous content to finish before capture.
• Set the viewport first. A different width can change the modal’s size, alignment, or layout. Use Device Mode to approximate a target viewport.
• Keep the modal in view. For viewport capture, scroll until the modal is positioned as desired. For full-page capture, check how the modal appears relative to the longer page.
• Choose area capture for framing. It is useful when the deliverable should focus on the dialog instead of the entire viewport.
• Verify the file. Check that the expected overlay, backdrop, and page context appear in the downloaded screenshot.

In-page modal or browser dialog?

A webpage modal is typically an overlay rendered as part of the page. Chrome can capture the page while that overlay is visible. JavaScript methods such as alert(), confirm(), and prompt() open browser-managed dialogs, which are handled separately in the DevTools Protocol. The available documentation does not establish that ordinary page screenshots include these native dialogs. If your goal is to document one, verify the actual output or use a capture method designed to include the browser interface.

Or skip the browser setup

For automated page captures, ScreenshotNeo is a website screenshot API and MCP server. A screenshot API captures the page state it can access; it does not promise to open an arbitrary modal for you. Trigger the in-page modal through your own page setup when required, then request the capture. See the ScreenshotNeo API docs.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, with the page verdict and billing status reported in response headers. Its MCP server gives AI agents screenshot tools. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, with no card.

Troubleshooting

Problem	Likely cause	What to do
The modal is missing	It was not open at capture time, or it is a browser-managed JavaScript dialog.	Trigger the page modal and capture after it appears. For a native dialog, verify whether your chosen capture method includes browser UI.
The image shows only part of the page	You used viewport capture.	Choose Capture a full size screenshot if the whole page is needed.
Area capture will not start	DevTools is undocked.	Dock DevTools, reopen the Command Menu, and choose Capture area screenshot.
The modal looks different from the target device	Device Mode is an approximation, or the viewport differs.	Set the needed dimensions and verify on actual hardware when physical-device behavior matters.
The modal is clipped or poorly framed	The viewport, scroll position, or selected area does not fit the dialog.	Adjust the viewport or page position, then recapture. Use area capture for a tighter crop.

Performance, reliability, and cost

For a one-off image, DevTools avoids setting up a separate capture service. Full-size pages may take longer to capture and produce larger files than a viewport or area shot. For repeatable captures, keep the viewport and modal state consistent, and make sure the page has finished rendering before you capture. Device Mode is useful for responsive checks, but it is not a substitute for testing on physical devices.

ScreenshotNeo is an option when captures need to run through an API or an MCP client. It offers PNG, JPEG, WebP, and PDF output, and its listed plans range from a free 1,000 shots per month to paid plans starting at $5 for 3,000. Use response verdict and billing headers when diagnosing whether a capture was clean and billable. Feature and pricing details: docs.

FAQ

Can I capture just the modal?

Yes. Use the DevTools Command Menu’s Capture area screenshot and drag around the dialog. DevTools must be docked.

Does full-size capture keep a modal fixed in the viewport?

It captures the full page, but the cited Chrome guidance does not specify how every fixed or sticky overlay is represented during full-page capture. Inspect the result and use viewport capture if the visible state is the requirement.

Does Chrome Device Mode prove the page works on a phone?

No. It approximates mobile rendering. Use a physical device when actual device behavior matters.

Will the screenshot include an alert or prompt?

The documented protocol treats JavaScript dialogs separately from page screenshots, so do not assume they will appear. Verify the output for your capture workflow.