More Modals Snippets
Front-End Coding Playgrounds
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewProduct Quick View — Shop Modal HTML CSS JS
Product Quick View · Modals · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
Product Quick View — Quick-Shop Modal with Gallery, Variants & Add to Cart
A product quick-view lets shoppers inspect an item — see more photos, pick a size and color, set a quantity, and add to cart — without leaving the listing or category page they're browsing. It's one of the highest-impact conversion patterns in e-commerce because it removes a full page load between "interested" and "in cart." This snippet builds a complete quick-view modal in plain HTML, CSS, and vanilla JavaScript: an image gallery with thumbnails, color swatches that re-skin the preview, a size picker with out-of-stock handling, a quantity stepper, and an add-to-cart button that reflects the running total.
A gallery driven by the selected color
The main image area and a row of thumbnails are both generated from a COLORS array, and selecting a color (via either a thumbnail or a swatch) re-skins the main preview and keeps the two controls in sync. In this demo the "images" are colored panels for portability, but the structure — main view plus clickable thumbnails, each tied to a variant — is exactly what you'd populate with real product photos, swapping the panel's background for an <img>. Selecting a swatch updates the thumbnail highlight and vice versa, so there's never a mismatched active state.
Variant selection with out-of-stock states
Color swatches and size chips are both rendered from data, with the current selection clearly ringed. Sizes carry an out flag: an out-of-stock size renders struck-through, dimmed, and disabled, so it can't be selected — and if the user somehow tries to add an out-of-stock variant, the add-to-cart handler blocks it with an inline message ("That size is out of stock — pick another"). This guards against the most frustrating e-commerce moment: adding something to your cart only to discover at checkout that it was never available.
Quantity and a live total
A bounded quantity stepper (1–10) drives a running total shown right inside the add-to-cart button — "Add to cart · $256" — so the price the shopper will pay is never hidden behind another click. The decrement button disables at one, preventing a zero-quantity add.
Add-to-cart feedback that confirms the action
Clicking add (with a valid in-stock variant) flips the button to a green "✓ Added to cart" state for a moment before reverting, giving immediate confirmation that the action registered. The handler is where you'd push the selected { color, size, qty } to your real cart state or POST it to a cart API; the confirmation animation is intentionally optimistic so the UI feels instant.
Responsive, accessible, and animation-safe
The modal is a two-column grid (gallery + info) that collapses to a single column below 560px, is role="dialog" with aria-modal="true", and closes via the ✕ button, a backdrop click, or the Escape key — all through one close() function. It animates in with opacity and transform only, keeping the entrance smooth across every framework export, and the body scrolls internally (max-height: 90vh; overflow: auto) so even a tall product fits any viewport.
Build with AI
Build, Understand, Optimize, and Extend It With AI
You don't have to trace every piece of shared state by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how selecting a color from either the thumbnail row or the swatch row keeps both controls' active states synchronized through the same state.color value, and why the out-of-stock guard in the add-to-cart handler exists even though disabled size buttons should already prevent that selection. The same assistant can help optimize it, for example checking whether re-rendering the entire thumbs/swatches/sizes markup on every single interaction is more work than necessary versus updating just the changed active classes, or whether the modal's open/close animation stays smooth if the product description is much longer. It's also useful for extending the effect: ask it to swap the colored placeholder panels for real product photography with a loading state, add a quantity-based bulk discount that updates the live total, or persist the last-viewed product's selected variant in sessionStorage so reopening quick view remembers the choice. Treat the code less like a finished artifact and more like a starting point for a conversation.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build an e-commerce product quick-view modal in plain HTML, CSS, and vanilla JavaScript — no libraries, no modal framework.
Requirements:
- A trigger button that opens a centered modal dialog (with a semi-transparent backdrop) containing, in a two-column layout: a gallery side with one large main preview and a row of small clickable thumbnails, and an info side with a product tag, title, star rating, current and struck-through original price, description, a color swatch picker, a size picker, a quantity stepper, and an add-to-cart button.
- Both the thumbnail row and a separate swatch row must represent the exact same set of color variants and must always show the same variant as "active" — selecting a color from either control must update the main preview and keep both controls' active-state highlighting in sync with each other.
- Render the size picker from a data array where some sizes are flagged as out of stock; those specific size buttons must be visually struck-through, dimmed, and given the native disabled attribute so they cannot be clicked at all.
- A quantity stepper bounded between 1 and 10, where the decrement button becomes disabled at the minimum, and the add-to-cart button's label must always show quantity multiplied by unit price as a live-updating total (for example "Add to cart · $256"), not just a static "Add to cart" label.
- Clicking add-to-cart must first check whether the currently selected size is flagged out of stock — if so, show an inline warning message instead of adding anything; otherwise, briefly show a green "Added to cart" confirmation on the button before it reverts to its normal label and total after roughly two seconds.
- The modal must be dismissible via a close button, a backdrop click, or the Escape key (all routed through one shared close function), have proper role="dialog" and aria-modal attributes, animate in and out using only opacity and transform (no layout-affecting properties), and collapse to a single-column layout on narrow viewports.Step by step
How to Use
- 1Paste HTML, CSS, and JSA "Quick view" button renders. Click it to open the product modal with gallery, variants, and add-to-cart.
- 2Pick a colorClick a swatch or thumbnail — the main preview re-skins and both controls stay in sync on the selected color.
- 3Choose a sizeClick a size chip; out-of-stock sizes (XL here) are struck-through and disabled so they can't be selected.
- 4Adjust quantityUse the +/− stepper (1–10) — the add-to-cart button's total updates live to reflect quantity × price.
- 5Add to cartClick add — it confirms with a green "✓ Added" state, or blocks with an inline message if an out-of-stock variant is somehow selected.
- 6Wire up real product dataReplace the COLORS/SIZES arrays and the color panels with your product's variants and images, and push { color, size, qty } to your cart in the add handler.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Replace the main panel's inline background with an <img> whose src comes from the selected color's image, and give each COLORS entry an image URL (and a thumbnail URL). The thumbnail/swatch click handlers already drive the active variant — just point them at real assets and update the <img> src in syncColor() instead of the background.
In the add button's click handler (after the out-of-stock guard), push the selected { color, size, qty } and the product id to your cart state (a store, context, or localStorage) or POST it to your cart/checkout API, then show the success state on success — keep the optimistic confirmation so the UI feels instant.
Give each size (and optionally each color) its own stock count and price in the data, look them up by the current state.size/state.color when rendering, and recompute the total from the selected variant's price rather than a single UNIT_PRICE — disable add entirely when the selected combination is out of stock.
Give each color an array of image URLs, render one thumbnail per image, and on thumbnail click swap the main image rather than the color. For zoom, pair the main image with an image magnifier that follows the cursor over a high-resolution source.
In React, hold { color, size, qty } in useState and derive the rendered swatches/sizes/total from it, calling your cart action in the add handler; in Vue, use reactive() with computed totals; in Angular, use component fields with getters. The open/close modal logic and out-of-stock guard port directly.