Page Modal / Lightbox
What You'll Create
Add a lightbox popup overlay to your Squarespace site that loads the content of any page — or a specific section within it — directly into a modal, triggered by clicking any link. Visitors stay on the current page while previewing content from elsewhere on the site. The link pattern is simple: set any link to #popup~about to load the /about page, or #popup~about~hero to load just the #hero section from that page.
The Problem It Solves
Squarespace has no native modal or lightbox for page content. If you want visitors to preview a page — like a team bio, service detail, or policy page — without navigating away, there's no built-in solution. Third-party plugins exist, but they tend to be heavy, require custom HTML blocks, or don't integrate cleanly with Squarespace's page structure. This technique uses a simple link pattern to fetch and display any page's content in a clean overlay — no plugins needed.
Perfect For
Team member bio popups, Portfolio project quick-view overlays, Service detail lightboxes, FAQ answer expansions, Contact page previews without navigation
What Makes This Different
The entire system is controlled through how you format your links — no code editing needed after the initial setup. Set any link to the required pattern and the script automatically retrieves that page and displays it in a styled overlay. To show only a specific section, add the section anchor as a third segment in the link. The CSS and JavaScript files are lightweight and hosted externally, so setup is just two lines added to your footer code injection. No third-party plugins, no embedded frames, and the overlay styling is fully customizable via CSS. Works best with Classic editor pages, since interactive components like galleries may not fully load inside a fetched overlay.
Details
Section Type: Fluid & Classic
Code Type: CSS + JavaScript
Prerequisites: External CSS and JS added to footer code injection. Links using the
#popup~slugpattern. Classic editor recommended for source pages. For section-specific loading, use#popup~slug~anchor.Toolkit Title: Page Modal / Lightbox
Learn This Technique
This is one of 150+ code techniques taught inside Standout Squarespace, where you get:
The complete, copy-paste code
Video walkthrough explaining how it works
The principles behind the technique so you can customize it
Access to our private community for support