Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
njrusso7

How can I create a popup window with text?

Question

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?

Edited by erich

Share this post


Link to post

Recommended Posts

  • 2

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

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 1

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


Share this post


Link to post
  • 1

@andreasis

This would be with more CSS. Try the below to see if it works:


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







Edited by kenwestphal
Initial Revision

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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



Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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>


Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Edited by kenwestphal

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...