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

Issue with closing image popup using Featherlight


afahlstrom

Question

Site URL: https://www.afahlstrom.com/test-page

Hello Squarespace-people!

So, I've implemented a popup-feature on my homepage using Featherlight.
Everything works except when I try to close the popup-window. I need to close it "twice" and it's really annoying!

I've searched the whole internet for answers, but noone seem to have this kind of problem...

Please help me!


Code in my Header:

<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />

Code in my Footer:

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

Code for the button that executes the feature:

<div class="sqs-block button-block sqs-block-button" style="text-align:center; padding:0;">
<a href="#/" data-featherlight="#playerflowchart" class="sqs-block-button-element--medium sqs-block-button-element">View Player Flowchart</a>
</div>

<div style="display:none;">
<div id="playerflowchart" style="text-align:center;">
<img src="https://static1.squarespace.com/static/5e24379002411b772ec6e88d/t/5f4294baa4e40060b3c2359e/1598198977828/Player+Flowchart.png" alt="Player Flowchart" style="max-width:100%;" />
</div>
</div>

 

Edited by afahlstrom
Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

It seems that when you click the button, it will display 2 popups, so you need to click X twice. Try add this to Home > Design > Custom CSS .featherlight:last-child { display: none

I actually solved it! With a bit of support from tuanphan ofc... 🙂 It was an error in my HTML-code, silly enough. All I had to do was to remove class="sqs-block button-block sqs-block-button" fr

3 answers to this question

Recommended Posts

  • 0

Thanks for coming back to me tuanphan!

It seems like your suggestion did something, but unfortunately it didn't solve it. First time it works with 1 click, but after that I need to click X twice again...

Also, by adding this line of code, I noticed that my scroll function on the page stops from working once I close a popup. So it seems that there's still something in the background running.

Really wierd!

Edited by afahlstrom
Link to post
  • 0

I actually solved it! With a bit of support from tuanphan ofc... 🙂

It was an error in my HTML-code, silly enough.

All I had to do was to remove class="sqs-block button-block sqs-block-button" from the first div in my button. Now it creates 1 popup each time as it should.

 

The old code:

<div class="sqs-block button-block sqs-block-button" style="text-align:center; padding:0;">
<a href="#/" data-featherlight="#playerflowchart" class="sqs-block-button-element--medium sqs-block-button-element">View Player Flowchart</a>
</div>


The new code:

<div style="text-align:center; padding:0;">
<a href="#/" data-featherlight="#playerflowchart" class="sqs-block-button-element--medium sqs-block-button-element">View Player Flowchart</a>
</div>

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...