Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

For a modal built into a webpage, open it first, then use Chrome DevTools’ Capture screenshot option to save the visible viewport. Choose Capture a full size screenshot for the entire page, or use Capture area screenshot to select just the modal and nearby content. A browser-managed JavaScript alert, confirm, or prompt is different; Chrome’s documentation describes handling these dialogs separately and does not establish that they appear in page screenshots.

Capture an in-page modal in Chrome

  1. Open the page in Chrome and trigger the modal. Wait until it is visibly rendered in the state you want to capture.
  2. Open DevTools. If you need a particular screen size, turn on the Device Toolbar and choose a device preset or enter dimensions in Responsive mode.
  3. In the Device Toolbar, open More options and select Capture screenshot to capture the current viewport. Chrome documents this workflow in its Device Mode guide.
  4. Open the saved image and check that the modal is visible at the intended size and position.

The screenshot reflects the page’s state at capture time. If the dialog has not finished appearing, or has already closed, the image will not show the state you intended.

Choose viewport, full-page, or area capture

Capture option What it captures When to use it
Capture screenshot The current visible viewport Use when the open modal and its visible surroundings are all you need.
Capture a full size screenshot The full page, including content beyond the viewport Use when the screenshot should include the whole page as well as the open modal.
Capture area screenshot A rectangle you select on screen Use when you want the modal and a chosen amount of surrounding content.

Select an area around the modal

  1. Open the DevTools Command Menu.
  2. Type screenshot and choose Capture area screenshot.
  3. Drag to select the rectangle you want captured.

Chrome’s Command Menu guide notes that area capture does not work when DevTools is undocked. Dock DevTools before choosing the command if it is unavailable.

Set a responsive viewport when needed

To capture a modal at a mobile-like or specific responsive width, turn on the Device Toolbar and enter the required dimensions or select a listed device. Chrome’s Device Mode is an approximation of mobile rendering; it does not run the page on a physical mobile device. Use an actual device when the screenshot must establish behavior on real hardware. For an unlisted device, Chrome documents adding one under Settings > Devices and specifying its details in the Devices settings guide.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
#1 Best Overall
Samsung 14" Galaxy Chromebook Go Laptop PC Computer, Intel Celeron N4500 Processor, 4GB RAM, 64GB Storage, ChromeOS, XE340XDA-KA2US, Student Laptop, Silver
  • SLIM. LIGHTWEIGHT. READY TO GO: The all-new slim design is perfect for busy lives on the go.
  • SKILLFULLY DESIGNED. MILITARY TOUGH: Built with premium craftsmanship to withstand the occasional drop or ding.
  • ALL-DAY, ALL-IN-ONE CHARGING: Power through your school day – and beyond – with a long-lasting 12-hour battery.¹
  • 3X FASTER THAN THE PREVIOUS GENERATION OF WIFI: Crush your schoolwork in record time with Wi-Fi that’s three times faster than the previous generation of Wi-Fi.
  • YOUR PHONE AND CHROMEBOOK WORK BETTER TOGETHER: Easily transfer files between devices, and control your phone right from your Chromebook.

In-page overlays and browser dialogs are not the same

A typical website modal is part of the page: HTML and CSS draw it over the page content. The capture options above apply to the rendered page, so open that overlay before taking the screenshot.

A JavaScript alert(), confirm(), or prompt() is a browser-managed dialog, not an in-page overlay. The Chrome DevTools Protocol Page reference documents page screenshot capture separately from handling JavaScript-initiated dialogs. It does not say that those native dialogs are composited into page screenshots. Do not assume one will be included; inspect the actual result or use an appropriate capture method for the specific application.

Rank #2
HP Chromebook 14 Laptop, Intel Celeron N4120, 4 GB RAM, 64 GB eMMC, 14" HD Display, Chrome OS, Thin Design, 4K Graphics, Long Battery Life, Ash Gray Keyboard (14a-na0226nr, 2022, Mineral Silver)
  • FOR HOME, WORK, & SCHOOL – With an Intel processor, 14-inch display, custom-tuned stereo speakers, and long battery life, this Chromebook laptop lets you knock out any assignment or binge-watch your favorite shows..Voltage:5.0 volts
  • HD DISPLAY, PORTABLE DESIGN – See every bit of detail on this micro-edge, anti-glare, 14-inch HD (1366 x 768) display (1); easily take this thin and lightweight laptop PC from room to room, on trips, or in a backpack.
  • ALL-DAY PERFORMANCE – Reliably tackle all your assignments at once with the quad-core, Intel Celeron N4120—the perfect processor for performance, power consumption, and value (2).
  • 4K READY – Smoothly stream 4K content and play your favorite next-gen games with Intel UHD Graphics 600 (3) (4).
  • MEMORY AND STORAGE – Enjoy a boost to your system’s performance with 4 GB of RAM while saving more of your favorite memories with 64 GB of reliable flash-based eMMC storage (5).

Troubleshoot a missing or incorrect modal

  • The modal is missing: Confirm it is open and fully rendered before capture. If it is a browser-managed JavaScript dialog rather than a page overlay, page screenshot documentation does not establish that it will appear in the image.
  • The screenshot cuts off the page: You likely captured the viewport. Choose Capture a full size screenshot from the Device Toolbar’s More options menu for a whole-page image.
  • Area capture is unavailable: Dock DevTools; Chrome documents that Capture area screenshot does not work while DevTools is undocked.
  • The responsive result differs from a phone: Device Mode approximates mobile rendering. Check on actual hardware if device-specific behavior matters.
  • The modal is the wrong size or position: Set the viewport before triggering or capturing it, then inspect the resulting image. Responsive layout can change where and how large an in-page modal appears.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Or skip the browser setup

If you need a screenshot through an API, ScreenshotNeo takes a screenshot with one GET request. The endpoint returns an image or PDF; for this example, request a WebP image of the target page. See the ScreenshotNeo API documentation for request options.

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

Replace YOUR_API_KEY and the example URL with your key and target page. ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses identify the page verdict and billing status in headers. An MCP server offers take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. API capture is an alternative workflow, not a way to capture Chrome’s own browser-managed JavaScript dialog as part of a page image.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.

Rank #4
HP 14" HD Chromebook Laptop for Students, Intel Quad-Core N4120(> N4020), 4GB RAM, 64GB eMMC, WiFi, Webcam, HDMI, USB-A&C, 14 Hours Battery Life, Zoom, Chrome OS, CUE Accessories
  • Intel Celeron N4120: 4 Cores & Threads, 1.1GHz Base Clock, Up to 2.6GHz Boost Clock, 4MB Cache, Intel UHD Graphics 600. The perfect combination of performance, power consumption, and value helps your device handle multitasking smoothly and reliably with four processing cores to divide up the work.
  • 14" HD Display: 14.0-inch diagonal, HD (1366 x 768), micro-edge, anti-glare. See your digital world in a whole new way. Enjoy movies and photos with the great image quality and high-definition detail of 1 million pixels.
  • Memory & Storage: 4 GB LPDDR4x & 64 GB eMMC Storage. Adequate high-bandwidth RAM to smoothly run multiple applications and browser tabs all at once. An embedded multimedia card provides reliable flash-based storage.
  • Ports:2 x USB 3.0 Type-A,1 x USB 3.0 Type-C,1 x HDMI,1 x Headphone Jack
  • Chrome OS: Chromebook is a computer for the way the modern world works, with thousands of apps. Enjoy the seamless simplicity that comes with Google Chrome and Android apps, all integrated into one laptop. It’s fast, simple, and secure.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.