Create Pop-up Bio's on the team section in Squarespace 7.1

Site URL: https://gar-cow-cwsx.squarespace.com/about-2

Hello!

I'm trying to add pop-ups to the team section for the bios (button>read bio) as the text for each team member is 200 characters. 

The team section is at the bottom of the about page.  The password for the site is: bertie

I have tried the solution below but didn't work (probably the code needs to be tweaked for the new version?) 

Thanks! 

Great, thanks @tuanphan, I'll let you know how I go 🙂

On 7/29/2021 at 1:26 PM, AnnieTimmins said:

Great, thanks @tuanphan, I'll let you know how I go 🙂

If you have any problems, just let me know. We can make a quick video on how to do this.

Works perfectly – Thanks!

On 8/9/2021 at 11:32 PM, AnnieTimmins said:

Works perfectly – Thanks!

What was the solution? I'm working on this now. Did you use the code or purchase Lightbox?

On 2/16/2022 at 6:37 AM, GRP said:

What was the solution? I'm working on this now. Did you use the code or purchase Lightbox?

I just checked their site & see they still use Lightbox plugin

I can not take any credit for this but have a client who used the following code as a solution. The popup includes an image of the person and links to social media. The photo and icon images need to be uploaded as a custom file under Custom CSS and you will then need the static image link to add in the final HTML. I've used this solution both for 7.0 and 7.1

I hope it works for others as well!

-----

Advanced/Code Injection

Header:

<!-- Start of lightbox Embed Code -->

<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet" />

<!-- End of lightbox Embed Code -->

Footer:

<!-- Start of lightbox Embed 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>
<!-- End of lightbox Embed Code -->

Design/Custom CSS

.readm {
    text-align: center;
    color: #0b7977;
    margin-top: -30px !important;
    margin-bottom: 30px;
}
.readm a {
    border-bottom: 1px solid #a4d0cf;
}

.pop1 {
    width:30%;
    padding: 5%;
    float: left;
}
.pop2 {
    padding: 5%;
  width:70%;
  float: left;
}

@media only screen and (max-width: 1300px){
.pop2 {
    padding: 0 10%;
    width: 70%;
    float: left;
}
.pop1 {
    width: 30%;
  padding: 0%;}
}

@media only screen and (max-width: 1024px){
.pop1 {
    width: 100%;
    padding: 5%;
    float: none;
    display: flex;
    align-content: center;
    justify-content: space-around;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}
.pop2 {
  width:100%;
  padding: 5%;
  text-align: center;
}
  }

And in the location you want the popup to appear

HTML Block

<div class="readm"><a href="#" data-featherlight="#bio-john">Read more</a></div>

<div style="display:none;">
<div id="bio-john">
<div class="fullpop" style="width:100%;">
<div class="pop1">
<img src="https://images.squarespace-cdn.com/content/v1/60d2f886e15def5d8728b4ad/1624439022058-3LL2SZZROT52SCAM1QG1/adrian_n.jpg?format=500w" alt="adrian" />
</div>
<div class="pop2">
<h3>Dr. Jennifer Gatt, Ph.D.</h3>

<p>Dr. Gatt is an Arizona licensed psychologist specializing in children, adolescents and young adults presenting with academic/occupational, social, psychological or adaptive functioning concerns.<br><br>
Dr. Gatt received her Ph.D. in Educational Psychology from Arizona State University, after which she completed a postdoctoral fellowship in neuropsychology. Her early experience as a school psychologist and subsequent specialization in neuropsychology have led to a broad understanding of educational and medical models.
<br>
</p>
<div class="socialpop1"><h4>Contact info</h4></div><div class="socialpop2" style="padding-top:5px;"><a href="https://www.linkedin.com/in/adrianvdm/" target="_blank"><img src="https://static1.squarespace.com/static/60d2f886e15def5d8728b4ad/t/60eabe85db8bb141bae8fc3b/1625996933768/iconmonstr-linkedin-5-32.png" alt="linkdin" /></a>
<a class="email_address" href="mailto:adrian@northwind.digital"><img src="https://static1.squarespace.com/static/60d2f886e15def5d8728b4ad/t/60eabe8f025aa46e30e2b750/1625996943036/iconmonstr-email-14-32.png" alt="Email" /></a></div>

</div>
</div>
</div>
</div>