Jump to content

Featherlight Popup Troubleshooting

Recommended Posts


I have successfully used this code to add pop-up text boxes when clicking on buttons/images on multiple Squarespace websites, but seem to be facing some issues with it on the website I am currently working on. 

Here is the code I used in the block: 

  <a href="#/" data-featherlight="#bio-zeinab"></a>

<div style="display:none;">
<div id="bio-zeinab">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

Here is the code inserted in the page's header (line 1 is to remove the menu and footer on the page): 

<style>.header, #footer-sections {display:none!important;}</style>

<link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<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>

Currently, when I add the code to my page, a pop-up successfully appears, but the text is invisible (image 1). When I move my cursor over the text, the text select icon appears, and I can drag along the invisible text (yet no selection highlighting occurs). I know that the text is present - when I right click I can "look up" the selected text (image 2). 

Does anyone know how to fix this or why this is happening? Any help would be greatly appreciated! 

Thank you!

Screen Shot 2020-05-31 at 12.59.31 PM.png

Screen Shot 2020-05-31 at 12.59.46 PM.png

Edited by elbarrad
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Can you share link to page where you inserted popup?

I guess you can use CSS to change text color/visibility/opacity... (need to check)


you can also try this plugin to create lightbox popup, easy to install/customize without coding skills.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

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

  • 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.