Issue with closing image popup using Featherlight

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>

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 !important;
}

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!

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>