How to use custom code to create a popup window with text for bios

Hello,

I am trying to add a custom code for creating a popup window with text for the bios of our board (team).

I am using the Moksha layout 7.0 and the board page has 4 photos of people with their names.

Would I would like for it to do is when clicked on name/or a text that says "Read bio" a pop should open with text and then close when you click a small x.

Thank you so much for your suggestions.

Amy

Hi. You can use Lightbox Plugin to achieve this.

I used code from another client's project to achieve this. You can see examples here on both 7.0 and 7.1.

https://gopher-carrot-zx3f.squarespace.com/team-1

https://www.myfirstnestegg.com/about

This is what I am using:

Settings/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

////bio-popup////
.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 on the page in an HTML block

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

<div style="display:none;">
<div id="bio-annie">
<div class="fullpop" style="width:100%;">
<div class="pop1">
<img src="https://images.squarespace-cdn.com/content/v1/61a8e71f81244d77bf34c911/1645472912345-6V5ATVDKUXYYSF7QHZAE/Annie-Shoen-MyFirstNestEgg.jpg?format=300w" alt="annie" />
</div>
<div class="pop2">
<h3>Annie Shoen</h3>

<p>Annie is passionate about financial literacy and believes that every child deserves a financially stable future. A career prosecutor, Annie spent years in the criminal justice system working with vulnerable and undereducated populations. She has seen first-hand what inadequacies in childhood education can produce, and is determined to empower all children to realize their unending potential.<br><br>
A native of the northwest, Annie graduated from Gonzaga University cum laude with a degree in criminal justice. She worked throughout college and competed on the Mock Trial team where she earned top honors as an All American Attorney. She transitioned into law school at the University of Washington, graduated two quarters early and was admitted into the Order of the Barristers, an organization committed to excellence in oral and written advocacy skills.<br><br>
 Annie moved to Portland, Oregon, where she joined the District Attorney’s Office as a prosecutor. In her ten years at the DA’s Office Annie quickly rose through the ranks and handled complex trials, ranging from financial fraud to murder. Annie worked countless cases, advising police, homicide detectives, and fire investigators at case outcome, and ultimately trying many cases in the courtroom.  Annie spent years as the special prosecutor assigned to Elder Abuse cases, wherein she worked with a multidisciplinary team to wholistically find solutions to complex problems including fraud and physical abuse. A skilled and insightful communicator, Annie presented in person and on TV to educate audiences about how to avoid financial scams.<br><br>
Annie left the DA’s office to focus on raising her four children, but it wasn’t long before she found another group for which to advocate: children who are not being given the tools they need to grow into financially literate adults. Annie is humbled and excited to be working on a solution to this pressing issue and cannot wait to bring My First Nest Egg to the families who need it most. </p>
<div class="socialpop1"></div><div class="socialpop2" style="padding-top:5px;"><a href="https://www.linkedin.com/in/annie-shoen-511a74230/" target="_blank"><img src="https://static1.squarespace.com/static/60d2f886e15def5d8728b4ad/t/60eabe85db8bb141bae8fc3b/1625996933768/iconmonstr-linkedin-5-32.png" alt="linkdin" /></a>
</div>

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

*** You will need update with the name, links and image url which I bolded for you above.

I hope this helps!

Hi there, 

On the ABOUT page of the below website, where the meet the team section is i want to be able to click on the 'learn more about' button and it have a pop up that have text about the person answering a few questions. 

https://chloescreativeco-demo.squarespace.com/

Password: CHLOE

Can you please assist with code? i have tried myself but cant get multiple to function! 

Thankyou,

Cara 

18 hours ago, Cara1818 said:

Hi there, 

On the ABOUT page of the below website, where the meet the team section is i want to be able to click on the 'learn more about' button and it have a pop up that have text about the person answering a few questions. 

https://chloescreativeco-demo.squarespace.com/

Password: CHLOE

Can you please assist with code? i have tried myself but cant get multiple to function! 

Thankyou,

Cara 

You can use this guide, on guide, I used a plugin, you can add lightbox easier