Making a Popout Text Lightbox

 

1. Adding page header code

For the page you want to have the popout lightbox on, click the gear icon for that page’s settings, then click the Advanced tab. Paste the code below into the page header code injection box then save.

<link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />
      <script src="//code.jquery.com/jquery-latest.js"></script>
      <script src="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
 
 

2. Adding code blocks

On your chosen page, add a code block to any place it will fit and paste in the code below. The size and location of the code block don't matter as it will be invisible.

This is the lightbox that appears with whatever information you need. You can style this more with CSS as well as include an image if you want, the code below is just for text.

 <div style="display:none;">
 <div id="LIGHTBOX 1">
 <p>
   Insert your text here
 </p>
   </div>
   </div>

3. Adding a button

On your chosen page, add another code block and paste in the code below. This code is to create a link to the Lightbox that will appear when you click on it (ex. Learn More).

The source code is below and what it looks like is below that.

<center>
<div class="sqs-block button-block sqs-block-button">
   <a href="#" data-featherlight="#LIGHTBOX 1" class="sqs-block-button-element--medium sqs-block-button-element">Learn More</a>
 </div> </center>

If you need more than one lightbox then you'd simply repeat steps 2 and 3 but change the div ID to whatever you want. Just make sure that both IDs from steps 2 and 3 correspond.

Dont forget; share the knowledge!

 

Click the working example!

 

Hey! Thanks for checking out this custom code!

 

This code was adapted to this website from this post on SquareSpace Answers.