How can I create a popup window with text?

Help please!

This is the site I am working on:http://www.powersoccerteamusa.net/teamusa/

I am trying to make it so when you click on an athlete's image, a window will pop open that will show their biography. Is there a way to do this?

@njrusso7 Hopefully the answer I provided gives you want you want.

STEP 1

For the page you want to have the Lightbox on (ex. Bio page), 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:

<link href="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" /><script src="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

STEP 2

On your Bio page, add a “Code” block and paste in the code below. This is the Lightbox that appears with that person’s bio information. You can style this more with CSS as well as include an image if you want, the code below is just for bio text.

<div style="display:none;">
<div id="bio-john">
<p>
 Insert the bio text here
</p>
 </div>
 </div>

STEP 3

On your Bio page, add a “Code” block and paste in the code below. This is to create a link to the Lightbox that will appear when you click on that person's bio (ex. Learn more about John Smith).

<a href="#" data-featherlight="#bio-john">Learn About John</a>

If I wanted to make that link a button instead of a text link, I would use the code below

<div class="sqs-block button-block sqs-block-button">
 <a href="#" data-featherlight="#bio-john" class="sqs-block-button-element--medium sqs-block-button-element">Learn About John</a>
</div>

If you are going to have multiple bio’s, then you would repeat step 2 & step 3, but would replace “bio-john” with the next person / something different (ex. bio-jack )

@kenwestphal, I'd love to be able to get this to work! I seem to be following all your instructions, but am not getting the pop-up. When I hover over the link button my cursor acts like there's a link, but when I click nothing happens. Any advice would be SO appreciated! Thanks!

@alyssag

Try the code below in place of what I have in Step 1 above. Also, make sure you are viewing the website in the Live mode rather than the Build mode.

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

Thanks so much @kenwestphal for this code, ·i've just used this solution on my site and it worked perfectly.

One thing that might help others to make this work is, with this code:

<div class="sqs-block button-block sqs-block-button">   <a href="#" data-featherlight="#bio-john" class="sqs-block-button-element--medium sqs-block-button-element">Learn About John</a> </div>

The part that says:

<a href="#"

, you need to replace "#" with //cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css

Hi @manuko I am trying to achieve the same thing on a site I'm working on. Where do I put that piece of code that you added?

Learn About John

Hi @manuko I am trying to achieve the same thing on a site I'm working on. Where do I put that piece of code that you added?

Learn About John

Hi @kenwestphal

First of all, thanks for this code. I got it to do exactly what I needed.

However, I have a question: on mobile mode, the lightbox window does not automatically fill the screen, and you have to zoom out and scroll in order to see the whole text.

When I preview it on my computer, it seems to work fine. But on my phone it does what I described above.

Any tips?

Thanks!

Hi @atrc5975

Could you provide your website URL so I can take a look? I don't have any ideas on what to try at the moment. If I can see the website, that may help me.

Hi @kenwestphal! Thanks so much for this code. Quick question - you mention that you can style the content of the lightbox that pops up, even adding an image, by using CSS. What is the selector to control the CSS of this lightbox content specifically? Any example you could share? I'd like for the lightbox to have a title, some text, and then a link at the bottom for people to click on to close it, in case they miss the little "x" close marker in the top right corner. Many thanks!

Hi @kenwestphal! Thanks so much for this code. Quick question - you mention that you can style the content of the lightbox that pops up, even adding an image, by using CSS. What is the selector to control the CSS of this lightbox content specifically? Any example you could share? I'd like for the lightbox to have a title, some text, and then a link at the bottom for people to click on to close it, in case they miss the little "x" close marker in the top right corner. Many thanks!

Hi @mwarner23

For CSS styling of the lightbox, you can insert the CSS directly within the code for that lightbox. Below is an example of my STEP 2 directions below using extra code to insert a title, text, and image. I'll look into adding a button/link to close the Lightbox and post that in another post.

 <div style="display:none;">
<div id="bio-john">
<h1>Title of Lightbox</h1>
<img src="http://www.imageurl.jpg" />
<p>
  Insert the bio text here
</p>
  </div>
  </div>

hi @kenwestphal for this! im having a few problems with it however, I manage to make the 'learn about john' button appear but when clicking on it it simply jumps to my home screen, any suggestions?

Hi Manuko

I tried the above code with your addition and it worked for a couple of days - however now it has stopped working. When I click the button another screen comes up - it looks like it has been copyrighted.

Do you have any suggestions?

Many thanks

@Dhikari

Can you share a Screenshot of this OR the URL of the page that has this? I have come across some users that are now having to put the a " / " in the a href like this:

<a href="#/"></a>

@kenwestphal Thanks Ken! this is exactly what i'm looking for, i've followed your instructions and gotten the image as a clickable link sadly when i click the link it just jumps to the top of the page. i've tried adding the link instead of # written in the comment chain but that doesn't work either sadly.

@Sjiron

To fix that issue, some people have used "#/" instead of just using "#" in the code here

I got it working! thank you so much!

Hi there! Thank you so much for the code @kenwestphal! It works perfectly for me!

I just have one question, when the pop up box appears and I close it - it pops up again. So I ultimately need to close it twice.

Do you know what could be causing this?

Thank you :)

@SimonaZ7 That is very strange. Are you able to share the URL of the website or webpage where you have this so I can investigate?

Thanks,Ken

It's all sorted now @kenwestphal. I had some other code in the header and I think that's what was affecting it. Thank you though :)

@SimonaZ7 Great, glad to hear!

This worked in Step 1 opposed to the above mentioned. Thanks so much.

A question. I'm new to code, I got this feature to work great, but would like to change to size of the text in the lightbox window. In what step would I go about indicating the size change? Right now in my template it looks like the "normal" sizing, whereas I would like heading 2.

Any tips? Thanks---

@andreasis

This would be done with CSS code. Below is one example:

 <div style="display:none;">
<div id="bio-john">
<h2 style="font-size:36px;">Featherlight Title</h2>
<p style="font-size:24px;">>Body text of the Featherlight pop-up</p>
  </div>
  </div>

Perfect. Thanks.

One more question - how would I set max width for the lightbox?

Thanks so much