How can I create a popup window with text?

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

I am having this same issue. Everything works great except for closing out of the popup. Any ideas? Thank you so much for sharing this!!

https://ellipsis-partners.squarespace.com/leadership/

@ArielleSika4

It's working fine for me. Be sure you are logged out of your Squarespace website OR open it in an Incognito Window in Chrome and see if it works then.

Wow, my goodness. So sorry for wasting your time! That was the trick. Thank you kind Sir :)

Hello! I got the code to work perfect on text. How did you get the pop up to display when you click an image?

@andreacacique

You would use code similar to this:

<a href="#" data-featherlight="#bio-john"><img src="/s/photo.jpg" alt="Photo of John"/> </a>

Thank you so much!!! I got it to work but on chrome when I click on the image it goes to the top of the page and popup doesn't display: https://www.practiceyoganaples.com/teaching-team/#

What do you recommend?

You'll need to insert a slash after the # like the following:

<a href="#/" data-featherlight="#bio-john"><img src="/s/photo.jpg" alt="Photo of John"/> </a>

Thank you SO MUCH!! You're help is seriously appreciated!

Hello! The coding looks great, except I just stumbled upon an issue. I have to reload the page for the pop-up to work. If someone first enter the site, the pop-up does not work:

https://www.practiceyoganaples.com/teaching-team/#/

What do you suggest?

This code is awesome and very grateful for it.However, does anyone know how to turn it off for mobiles, as I can’t get it to display correctly - the X to close the window is out of view

@kabodhi

I've come across some lightboxes that won't show the X to close if it has a lot of content and uses bullet points. I used some CSS to fix this issue. I'm not sure what your lightboxes look like but if you want to include a link, I can take a look.

In order to hide them on Mobile, you can use some JavaScript (hopefully someone on here can provide details on what to include for this to happen) OR you can duplicate the code you have to show a lightbox, remove the link to the lightbox, and use some HTML & CSS to show one for Deskopt and show the one for Mobile.

@kenwestphal you mentioned in the comment above that you would post how to add a button/link to close the Lightbox in another post, but I can't find it. Would you please provide a link to the post? Thank you!

@aarnaa

I completely forgot about this so thank you for reminding me. See below for

 <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>
  <p>
    <a href="#" id="close_button">Close</a>
  </p>

  </div>
  </div>
<script>
// Close Button featherlight

jQuery(document).on('click','#close_button',function(){
   console.log("test");
   jQuery('.featherlight').click();
});
</script>

Thanks so much for the code @kenwestphal ! Much appreciated!

When I click the "Close" link it jumps the page back up to the top. Is there a way to have the close link work the same as the "x" in the upper right, so the page stays where it is when you close the pop-up rather than jump to the top?

My site is here, and I have the Close link at the bottom of the first "LEARN MORE" popup in the "Therapeutic Pipeline" section. (temporary password is "chrono2017")

Thank you!

@aarnaa

If that happens, you'll then need to edit the code that links to the lightbox by adding a " / " in the link, see below:

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

Thank you @kenwestphal ! Problem solved!

What about changing the background color etc. of the pop up box?

Hi @kenwestphal

Thank you for this - still very useful 2 years later! I am having the same problem as the user above and adding the / does not fix the issue. When I add the /, it no longer jumps to the top of the page but also does not show a lightbox. Do you have any other suggestions?

@djonn

There may be another issue going on. You can try using "/#" instead of just the "/". You can view my tutorials on the LIghtbox for a step-by-step setup - https://www.spacetutorials.com/squarespace-lightbox

@kenwestphal

It works now, thank you so much! Is there a way to adjust the size of the image when it's an image lightbox? When the image pops up right now, it's very large. I've tried

.featherlight .featherlight-content{max-width: 500px;}

in the Custom CSS tab but this only adjusts the text in the lightbox, not the image.

@djonn

Glad it works. You can try to add that CSS code to the image. So for example, the code for the image in the lightbox might be

<img style="max-width:500px;" src="images/myimage.jpg" alt="Image of Cosmo Kramer">

Hi! I am using this code now, and I am not a developer so my skills are basic, but now I have created a button "Denial", with which I want it to click through to a popup window which defines denial (I will do this with all of the stages of grief). I am only at the first of five and already at a loss.

Anyway, the popup window appears but is very small, with the X button in the top right corner, but the text does not appear. Is there something I am doing wrong?

Thanks in advance for any help in the matter.

Hi @kenwestphal I actually got the text to work now, so no worries on that one, i didn't realise code was case-sensitive.

However, my boss now wants something more advanced which is to add music into a pop up window. This can simply be a music box on the popup but i don't know how to go about that in code.

Is this possible and if so, do you know how to do something like that? Thank you so much in advance. Sam

Hi @Samkirby

Do you know if you will be embedding a simple MP3 OR would it be a Soundcloud or Spotify playlist widget? If a simple MP3, here is a great tutorial on the code for that - https://www.w3schools.com/html/html5_audio.asp

You would use the code they have in their Example to adjust to your MP3 URL and then paste that into the Lightbox.