Jump to content

Issue with closing image popup using Featherlight

Recommended Posts

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>

 

Link to comment
  • Replies 3
  • Views 787
  • Created
  • Last Reply

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!

Link to comment

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 comment

Archived

This topic is now archived and is 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.