How to Open a Full Section in a Lightbox-Style Modal (No Plugins Needed)

Looking to make a Squarespace section really pop like a proper modal window? Although Squarespace doesn’t have a native lightbox feature for full sections, this is very easy to do in a few lines of custom code. Turn any section into a lightbox-style overlay and feature forms, pricing tables, portfolios, and announcements that keep visitors on the page.

In this tutorial, we’ll guide you through opening an existing Squarespace section within a centered modal using a minimal amount of HTML, CSS, and JavaScript, with no third-party plugins required.

What You’ll Learn

In this guide, you will learn how to:

• Target any section that already exists by its data-section-id.

• Hide it by default

• Open it in a telecentered lightbox overlay when users click on a custom button.

• How to dynamically add a close (x) button in JavaScript?

• Maintain clean styling and responsiveness

Why Use a Lightbox Section?

Modal lightbox is ideal for:

• Displaying detailed service descriptions

• Adding lead-capture forms or appointment-scheduling forms to your website

• Show off images or embedded video galleries

• Making something clicky without refreshing a new page

Step 1: Add the Trigger Button

Add this button using a Code Block anywhere on your site:

<button id="openLightbox" class="lightbox-btn">Open Lightbox Section</button>

You can change the text to something like 'View Details', 'Contact Now', or 'Show More'.

Step 2: Add the CSS (Pages → Custom code → Custom CSS)

This CSS will:

• Center your section on the screen

• Make it responsive

• Add styling to the open and close buttons

Copy

Copied!

<style>
/* Hide section and center it like a lightbox modal */
section[data-section-id="685125d6308cee23f8c841e3"] {
  display: none;
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 90vw;
  height: 70vh;
  overflow-y: auto;
  background: white;
  padding: 40px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  border-radius: 20px;
}
/* Make it visible when triggered */
section[data-section-id="685125d6308cee23f8c841e3"].lightbox-active {
  display: block;
}
/* ✖ Close button style (top right) */
.lightbox-close {
  position: absolute;
  top: 10%;
  right: 30px;
  font-size: 28px;
  cursor: pointer;
  z-index: 10000;
}
/* Open trigger button style */
.lightbox-btn {
  padding: 10px 20px;
  background: #81A9B6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
</style>
  

Step 3: Add the JavaScript (Settings → Advanced → Footer Code Injection)

This script opens your section like a modal and injects a working close button:

Copy

Copied!

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const trigger = document.getElementById("openLightbox");
    const section = document.querySelector('section[data-section-id="685125d6308cee23f8c841e3"]');
    // Create and inject close button
    const closeBtn = document.createElement("span");
    closeBtn.classList.add("lightbox-close");
    closeBtn.innerHTML = "&times;";
    closeBtn.title = "Close";
    section.appendChild(closeBtn);

    // Open and close functions
    function openLightbox() {
      section.classList.add("lightbox-active");
      document.body.style.overflow = "hidden";
    }
    function closeLightbox() {
      section.classList.remove("lightbox-active");
      document.body.style.overflow = "";
    }
    // Event listeners
    trigger.addEventListener("click", openLightbox);
    closeBtn.addEventListener("click", closeLightbox);
    // Optional: close when clicking outside content
    section.addEventListener("click", function (e) {
      if (e.target === section) {
        closeLightbox();
      }
    });
  });
</script>
  

Live Preview Behavior

• Clicking the trigger button opens your selected section in a centered, scrollable modal.

• A custom close button (×) appears in the top right.

• The page body is locked to prevent background scroll.

• Clicking outside the section closes the lightbox.

Final Thoughts

Converting a Squarespace Section into a Modal Overlay If you are looking to enhance the interactivity of your site and draw attention to important content, the following technique may be ideal for you. Use this easy-to-use lightbox to showcase forms, service information, or product features, and do so in a professional lightbox style that doesn’t take visitors away from your page.

The best part? You don’t need apps, paid plugins, etc. A couple of lines of code, and you can be in full control over designing when and how your modal shows up! No matter if you’re a freelancer, have a portfolio-based site, or are selling something, this method gets your content noticed and provides a better overall user experience.

---

Frequently Asked Questions

• 1) Can I turn any Squarespace section into a lightbox modal?

  Yes. As long as you know the section’s data-section-id, you can target it with CSS and JavaScript to open it in a modal-style overlay.

• 2) Will this method affect my existing page layout?

  No. The section stays hidden by default and only appears when triggered. Your normal layout remains untouched until the modal is opened.

• 3) Do I need a plugin or third-party integration for this?

  Not at all. The effect is achieved using native Squarespace sections, plus small snippets of CSS and JavaScript that you add to Custom CSS and Footer Code Injection.

• 4) How does the close button work?

  The script dynamically injects a close button (×) into the section. Clicking it — or clicking outside the section closes the modal and restores the page scroll.

• 5) Is the lightbox responsive on mobile devices?

  Yes. Since the modal uses flexible width and height (viewport-based units), it adjusts smoothly to smaller screens. You can also tweak padding, font size, and border radius for a more mobile-friendly style.