I am working on a website where I have a 'Leadership Team' Page. I have 9 leaders on this page & I need to create a pop-up box for their bios. I am a newbie to Squarespace, & have limited coding experience. However, after hours & hours of research, I managed to find/tweak a code that works for 1 leader. However, when I insert another code block for the next leader, it doesn't seem to work & my alignment is getting messed up. Any help would be appreciated.
Step 1: On Page settings -> Advanced -> I inserted the following code:
Featherlight Box for Leadership Team Bio
in Customize with code
Posted
Hello,
I am working on a website where I have a 'Leadership Team' Page. I have 9 leaders on this page & I need to create a pop-up box for their bios. I am a newbie to Squarespace, & have limited coding experience. However, after hours & hours of research, I managed to find/tweak a code that works for 1 leader. However, when I insert another code block for the next leader, it doesn't seem to work & my alignment is getting messed up. Any help would be appreciated.
Step 1: On Page settings -> Advanced -> I inserted the following code:
<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet" />
Step 2: I created a code block and inserted the following code:
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
Step 3: Created another code block & inserted the following code:
<div style="text-align: center; padding: 0;">
<div style="display: flex; justify-content: left;">
<div style="width: 85%; max-width: 400px;">
<a href="#/" data-featherlight="#bio-leader2" class="sqs-block-button-element--medium sqs-block-button-element" style="background-color: #0D3C60; color: #fff; padding: 20px; width: 100%;">
<span style="font-weight: bold; font-size: larger;">Leader 2 Name</span>
<br>
<span style="font-size: smaller; font-style: italic;">Leader 2 Position</span>
</a>
</div>
</div>
</div>
<div style="display: none;">
<div id="bio-leader2" style="text-align: center; max-width: 600px;">
<div style="display: flex; align-items: center;">
<img src="leader2-image-url.jpg" style="max-width: 150px; margin-right: 20px; margin-top: 20px;">
<div style="text-align: left;">
<span style="font-weight: bold; font-size: large;">Leader 2 Name</span><br>
<span style="font-size: smaller; font-style: italic;">Leader 2 Position</span>
</div>
</div>
<div style="text-align: left;">
<p>Leader 2 bio information goes here.</p>
</div>
</div>
</div>