Add lightbox to a BUTTON?


So, I’ve read everything unbounce seems to say about popup lightboxes for terms, privacy, etc, and have installed the fancybox js.

However, how do I edit a button so that it opens a lightbox (I’m using one of your templates and can’t figure out how to do so).


6 replies

same as above - please answer…

Please help with this! Oli, where are tho to rescue us!

I found that you could hack this by clearing the text in the button text field and using a text box instead with the same font settings. Once you’ve layered a text box over the button and made sure the button was in the “back” you can follow these instruction for the lightbox effect.

Not perfect, but functional

Hey guys,

The script below will have buttons whose link target is “Same Window (_self)” open the link in a lightbox:

<script type="text/javascript"> <br /> jQuery(function() { <br />
jQuery("a.lp-pom-button[target='_self']").fancybox({
<br />
  'transitionIn' : 'elastic', <br />
  'transitionOut' : 'fade', <br />
  'overlayOpacity' : 0.8, <br />
  'overlayColor' : '#000', <br />
  'hideOnContentClick' : true <br />
 }); <br />
}); <br /><br />
</script>   

You’ll still want to take a look at the article at http://support.unbounce.com/entries/3… and follow the “If your page does/does not contain a form” part.

I had trouble with getting this to work, but here’s a documentation page that has different code that worked for me:
http://documentation.unbounce.com/hc/en-us/articles/203805714?_ga=1.99202589.2077231010.1432484952#c…

Thanks for sharing this, Peter! I’m going to mark this as the ‘Official’ response so that other users can find this easier. :) 

Reply