Add lightbox to a BUTTON?


#1

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


#2

same as above - please answer…


#3

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


#4

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


#5

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.


#8

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


#9

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…