Jump to content

Featherlight Popup Troubleshooting

Recommended Posts

Hello, 

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: 

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

<div style="display:none;">
<div id="bio-zeinab">
<p>
"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>
 </div>
 </div>

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

Link to comment
  • Replies 4
  • Views 1k
  • Created
  • Last Reply

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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.