Button That Pops a Text Lightbox?

Oh, and if maybe the problem is with what I have in the actual button code block text, here's how that looks:

 <div class="sqs-block button-block sqs-block-button">
  <a href="#" data-featherlight="#tuesdayues" class="sqs-block-button-element--medium sqs-block-button-element">Tuesday Uptown: Laid Back - Soft "No-Sting" rubber Balls</a>
</div>

<div style="display:none;">
  <div id="tuesdayues">
    <p>     <p>
<strong>When:</strong> COMING SOON: TBD - NOT YET OPEN
    </p><ul>
    <li>NYC's only "No-Sting" rubber ball league
<li>NYC's classic format for years.  Sign up solo or in small groups together and we make the teams out of that.  That’s what makes this league special and popular:</li>
<li>Great for newbies/if you suck/vets – every team will have a mix of all, so you’re good!</li>
<li>Teams are made even so everyone’s got a chance each week</li>
<li>Every season we pair different friend groups together so there are never any cliques.  Everyone meets everyone.  Which is why it’s become the best sports <i>community</i> in NYC - instead of just 10 team cliques by themselves</li>
<br /><a href=""><img data-node-image="https://powr.s3.amazonaws.com/app_images%2Fresizable%2F9aa487dd-3a9f-4fb5-819e-00d227fc5926%2FCapturFiles_62.png" src="https://powr.s3.amazonaws.com/app_images%2Fresizable%2F9aa487dd-3a9f-4fb5-819e-00d227fc5926%2FCapturFiles_62.png" width="55" height="23" /></a></li>
</ul></p>
  </div>
</div>

THANK YOU with big passionate enthusiastic capital letters!

@SandlotSportsNYC

The issue is your link doesn't contain a website URL. Since it is missing, it's going to jump to the top of the page. See below for this:

@JessicaDevlin

You would put the Featherlight JavaScript & jQuery code into the Header for the Index. So in Squarespace, you would click the gear icon for the Index, click on the Advanced tab, and paste in the code below into the "Page Header Code Injection" section of the Index.

Then on the actual page where you want the links or buttons to be displayed, you would insert your HTML code onto that page using the Code Block.

 <script src="//code.jquery.com/jquery-latest.js"></script>
<link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

Thanks KenUnfortunately that didn't do it. Those hrefs are just links WITHIN the popped out lightbox (when you click on the "register" button inside the lightbox - in the screenshot above - it takes you to that link). I have 4 buttons on that page. 2 of my buttons didn't have defined links yet like you pointed out. 2 of them do. But all 4 of them when clicking on the button send you to the top of the page. I'm not even clicking on the "register" icon IN the lightbox text relevant to the href. I put links in the href anyway though to test your suggestion - all of them send me to top

@SandlotSportsNYC

I looked at the source code and there isn't any Featherlight files or jQuery file which is required for these pop-ups. You can check out my Blog article that describes this Popup in better detail - https://www.kensdesigns.com/articles/squarespace-create-lightbox

I did re-create your buttons & popups on my Test Site using the Pacific theme and they work perfect - https://kensdesigns-testing1.squarespace.com/. In your code, there's some minor code issues but should still work once you add the Featherlight files & jQuery file.

Ah. Bad timing @kenwestphal . At the time you replied, I intentionally had removed the code for the moment so I could play with it on a test page. It's back in there now. But looking around at your page...I don't know if this makes me feel better or worse...but looks like it's not just my page.On your example (nice costanza!) https://www.kensdesigns.com/examples/featherlight#

If you scroll down that page so you're not already at the top, and then click the "learn about george" button...that's ALSO jumping you back to the top of the page. Can you see what I'm saying there?

@SandlotSportsNYC

It's working fine for me. What browser are you using & what version? I've tested it on the latest version of Chrome, Firefox v53, and also Microsoft Edge.

@kenwestphal I just fixed the jumping-to-the-top-of-the-page-upon-clicking-the-button issue. At least for now. At least for my page (Pacific theme).

I was able to find this article:http://stackoverflow.com/questions/3252730/how-to-prevent-a-click-on-a-link-from-jumping-to-top-of-page-in-jquery

Instead the code block for the button being

<a href="#" data-featherlight="#[WHATEVER YOU NAME IT]" class="sqs-block-button-element--medium sqs-block-button-element">[WHATEVER YOU WANT TO DISPLAY]</a>

Just add a

/

after the first

#

Making it

    <a href="#/" data-featherlight="#[WHATEVER YOU NAME IT]" class="sqs-block-button-element--medium sqs-block-button-element">[WHATEVER YOU WANT TO DISPLAY]</a>

I'm not good enough at coding to fully understand why this stops it from jumping. But it does the job it seems. Hope this helps someone else!

Glad to hear you found a fix and thanks for sharing!

@kenwestphal, you're amazing - as are all of you commenting on this thread.

If it helps any one else, I'm using Harris template and am only using 2 pages: a "home" page and a "references" page. (K.I.S.S., at least for me.) Placing the Step 1 code on the REFERENCES page (so, Gear Icon > Advanced > "Page Header Code Injection") was inconsistent (had the page jumping and the same redirecting to the HOME page issue described below.)

But when I tried placing the Step 1 code in the Page Header Code Injection of the HOME page it's working great now! Just FYI for everybody.

My question: can

@kenwestphal (continued from comment above)

My question: can you add a link inside the lightbox to close the current lightbox and open the next?

I have 5 references on my page. Rather than click a name to read a quote, then close the lightbox to then click another link to read the next quote, a "NEXT" button inside the lightbox would be great.

The same code from Step 3 WILL open the next lightbox, but it doesn't close the original lightbox.

Total newbie; guess we'd need a function to, on click, close the current and open the next lightbox? Both Next and Previous would be cool but it's the NEXT that's key. Thx!!!

If anyone has much simpler needs, I found a way to do a really simple text box popup with a title, subheading and basic text area by hacking the built in form. Don't use it on a page that needs forms.

In the page settings for the page you want to do this with put the following code:

<style>
 .form-button-wrapper{display:none;}
 form .field-element {display:none;}
</style>

Then create a form on your page, clear all the stock form fields and create one new simple text field, and in the advanced settings, set it to open in lightbox mode. The title and description of that field form the content of the popup

@facetcounter nice thinking outside the box! I used a "Section" field as it comes with a header and text. Here's some further code to help make the popup look nicer and the text larger:

.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper .form-inner-wrapper form {
margin-top: 10px;
}

.form-wrapper .field-list .section {
   font-size: 1.2em
}

.form-wrapper .field-list .description {
font-size: 16px;
}

Just incase anyone is reading this in 2019 and wants a simple solution - this plugin allows you to lightbox any content you want.

where does the above go in relation to :

Learn about John

 <p>Insert bio here</p>

@anacariniseiford I'm interested in doing this text lightbox upon click of a single image (there are 2 single images on my page – not as gallery – and both require short bio). Can this css be modified to not be link or button, but on hover of image? or click of image?

@ColeH_design

You can easily create a lightbox from clicking on an image. In my tutorial of a lightbox by clicking on text (https://www.spacetutorials.com/squarespace-lightbox/text), you would change the HTML code for the link to something like this:

<a href="#/" data-featherlight="#bio-john"><img src="https://www.mywebsite.com/john.jpg" alt="John Smith"></a>

@anacariniseiford @kenwestphal Any additional code that can be injected to change color of lightbox that appears (and make it transparent 80%)?

@ColeH_design

I'm not sure. I have a tutorial on changing the background color from white of the page when a lightbox appears but I haven't come across any documentation for changing the color of the actual lightbox itself.

@kenwestphal - thank you for your prompt reply. (The link does not open? But, I'd really like to watch tutorial if you don't mind re-linking).

@Lot71 can you share css code that solved your click through on images? I'm hoping to do the same thing for bios…

On 5/13/2017 at 6:45 AM, SandlotSportsNYC said:

This is my first time posting on here so I apologize if this is redundant as I sort of alluded to this in a comment as well. But I'm not sure who sees what pending where one posts!

I was so excited to find this solution yesterday. And it was all working when I set it up last night using @peter_kavalsky 's solution. But today, having touched nothing, it's stopped working.

I was able to play around a bit and got it back to sort of working. The lightbox with text pops up now. But upon clicking on it, it automatically sends me back to the top of the page. That wasn't happening yesterday.

I'm using Pacific theme. Same as @egrace . I've updated to the newest version of featherlight (and also tried old versions.) My site code injection looks like this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

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

 

 

And the page I'm struggling with is www.sandlotsportsnyc.com/register

Any help would be so immensely appreciated...because as the url implies - we're opening up registration Monday! And would hate this to be broken! Thanks so much community.

Hi, 

I hope the chat is still open in 2020 ! 

@SandlotSportsNYC I have the same issue. I followed all the step which are on @spacetutorials website : https://www.spacetutorials.com/squarespace-lightbox/setup

It was perfectly working yesterday but now, not anymore...I try I think all your suggestions but I am still struggling. 
I have the hand, such as something can be opened but not lightbox... 😞 

I am using Brine template on Squarespace 7.0. 

This is the code I have on my website : 

Header : <link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" /></link>

Bottom of the page I want the lightbox : <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>

Either with the button option :  <div class="sqs-block button-block sqs-block-button">
  <a href="" data-featherlight="#Nourissons" class="sqs-block-button-element--medium sqs-block-button-element">Nourissons</a>
</div>
<div style="display:none;">
<div id="Nourisson" style="text-align:center;">
<p>❇︎ Reflux Gastro-œsophagien (RGO) et régurgitations importantes<br />
❇︎ Coliques, diarrhées, constipations et troubles de la digestion<br />
❇︎ Troubles du sommeil, difficultés à faire ses nuits, etc<br />
❇︎ Troubles du comportement, hyper ou hyperactivité<br />
❇︎ Trouble ORL chroniques (otites, nez qui coule, bronchites, rhino…)<br />
❇︎ Torticolis, ainsi que toute asymétrie physique de tête (plagiocéphalie) ou du corps, etc.</p>
</div>
</div>

Or just a text : <a href="#/"data-featherlight="#femmesenceintes">Femmes Enceintes</a>
   <div style="display:none;">
<div id="femmesenceintes">
<p>
❇︎ Douleurs de dos, du coccyx
    <br />
❇︎ Sciatique, cruralgie et toute autre névralgie
    <br />
❇︎ Oppression thoracique, difficultés à respirer
    <br />
❇︎ Troubles circulaires
    <br />
❇︎ Insomnies, angoisse, fatigue et stress
    <br />
❇︎ Digestion difficile, nausées, vomissements, reflux, ballonnements, diarrhée, constipation
</p>
</div>
</div> 

I would love to have some help !! 🙂 

On 4/1/2016 at 8:35 AM, spacetutorials said:

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

Hello @spacetutorials, thank you so much for this code I was able to figure out the Lightbox and it comes up however I have problems with text appearing. I believe it appears in white color that's why I can not see it but I don't know how to change the color of the text. Could you help me with that, please?? Thank you, greatly appreciate it!

On 3/24/2021 at 2:01 AM, berodesign said:

Hello @spacetutorials, thank you so much for this code I was able to figure out the Lightbox and it comes up however I have problems with text appearing. I believe it appears in white color that's why I can not see it but I don't know how to change the color of the text. Could you help me with that, please?? Thank you, greatly appreciate it!

Hi. Can you share link to page where you have problem? I think we can use some CSS to solve this

Hi all! This code has been super useful for our team bio page: https://www.exposurelabs.com/team. We realized that it's not working on mobile though – when you click VIEW BIO on mobile, you see a form field and the submit button (whereas you see neither of those, just the bio text as desired, on desktop). 

Any ideas or solutions would be greatly appreciated!