Make a Button into a Pop-Up or Lightbox

What does this code do?

This code snippet will allow you to place content into a lightbox that pops up when a button is clicked. This is great for when you have a bit of code from a third party site such as a calendar or sign up form that you would like to show up as a pop up or lightbox.

Note that you can have videos, images, and Squarespace forms open in a Lightbox using built in Squarespace features. You do not need code to do this.

Video Tutorial

Code Snippets

Javascript

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Lightbox -->
<script>
function openLightbox(e) {
  e.nextElementSibling.style.display =
    "block";
  document.body.classList.add("stop-scrolling");
}
function closeLightbox(f) {
  f.target.closest(".rgd-lightbox-content-wrapper").style.display =
    "none";
  document.body.classList.remove("stop-scrolling");
}
document.addEventListener("click", function (event) {
  if (event.target.closest(".rgd-lightbox-content")) return;
  event.target.closest(".rgd-lightbox-content-wrapper").style.display =
    "none";
  document.body.classList.remove("stop-scrolling");
});
</script>

Custom CSS

Copy and paste the following code into Design > Custom CSS

/* Lightbox */
.stop-scrolling { 
    height: 100%; 
    overflow: hidden; 
} 
.rgd-lightbox-content-wrapper {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8); /*page overlay colour when lightbox is open */
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
/* Popup container */
.rgd-lightbox-content {
  width: 80vw; /* width of lightbox content */
  height: 80vh; /* height of lightbox content */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -40vh 0 0 -40vw; /* margin to center the content, these numbers must be half of the height and width */
  overflow: auto;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
/* Fade in the PopUp */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Lightbox close x */
.lightbox-close{
  color: white; /* color of x */
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px; /* size of x */
}

.lightbox-close:hover,
.lightbox-close:focus {
  color: #999; /* color of x on hover */
  text-decoration: none;
  cursor: pointer;
}

Then customize the colors, width, and height.

HTML

Copy and paste the following code into a code block where you would like the lightbox button to be.

<div class="rgd-lightbox">
  <div class="sqs-block button-block sqs-block-button" onclick="openLightbox(this);">
    <div class="sqs-block-content">
      <div class="sqs-block-button-container sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" data-button-type="primary">
        <a href="" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" data-initialized="true">BUTTON TEXT GOES HERE</a>
      </div>
    </div>
  </div>
  <div class="rgd-lightbox-content-wrapper">
    <span class="lightbox-close" onclick="closeLightbox(this)">×</span>
    <div class="rgd-lightbox-content">
      PASTE YOUR LIGHTBOX CONTENT CODE HERE
    </div>
  </div>
</div>

This will add a medium Squarespace button that is center aligned and uses the Primary Button styles. If you want a small or large button then change the word medium to small or large where ever it appears in the code above. if you want the button left or right aligned, then change the word center to left or right where ever it appears in the code above. If you want to use the secondary or tertiary button styles than change the word primary to secondary or tertiary where ever it appears in the code above.

Change the words BUTTON TEXT GOES HERE to whatever text you would like to be on the button.

Finally, paste the code from your third party site in the code where it says PASTE YOUR LIGHTBOX CONTENT CODE HERE.

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the colors, width and height of the lightbox content.

3. Add the code you want to be in the lightbox and customize the button.