Jump to content

How can I create a popup window with text?

Recommended Posts

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?

Link to comment
  • 1 year later...
  • Replies 50
  • Created
  • Last Reply

@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 )

Link to comment
  • 2 months later...

@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!

Link to comment

@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>



Link to comment
  • 3 weeks later...

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

Link to comment
  • 2 weeks later...
  • 1 month later...

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!

Link to comment
  • 2 months later...

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!

Link to comment

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!

Link to comment

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>


Link to comment
  • 1 month later...
  • 4 months later...

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

Link to comment
  • 1 month later...

@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.

Link to comment
  • 1 month later...

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.