We are able to use the FancyBox popup effect for our Unbounce LP (e.g. see screenshot)
Please copy the code and paste it into your JavaScript file:
<script type="text/javascript">
// Form Lightbox v1.2
// set the ID of the box that contains your form
var boxContainingForm = '#lp-pom-box-295';
// set the ID of the button that will trigger the form lightbox
var buttonToTriggerForm = '#lp-pom-button-288';
document.write('<style type="text/css">' + boxContainingForm + "{display:none}</style>"), $(function () {
function o() {
1 == lp.jQuery("form").valid() && $.fancybox.close()
}
var n = $(boxContainingForm).width(), t = $(boxContainingForm).height(), a = $(boxContainingForm).css("border-top-width"), i = $(boxContainingForm).css("border-bottom-width"), r = $(boxContainingForm).css("border-left-width"), s = $(boxContainingForm).css("border-right-width"), e = $(boxContainingForm).css("border-top-left-radius"), b = parseFloat(a) + parseFloat(i), c = parseFloat(r) + parseFloat(s), l = parseFloat(e);
n = parseFloat(n) + c, t = parseFloat(t) + b, l > 0 && ($("#fancybox-bg-w, #fancybox-bg-nw, #fancybox-bg-sw, #fancybox-bg-s, #fancybox-bg-se, #fancybox-bg-e, #fancybox-bg-ne, #fancybox-bg-n").css("display", "none"), $("#fancybox-outer").css("background-color", "transparent")), $(buttonToTriggerForm).attr("href", boxContainingForm), $(boxContainingForm).css({
top: "0",
left: "0"
}), $(buttonToTriggerForm).fancybox({
autoDimensions: !1,
width: n,
height: t,
autoScale: !1,
padding: 0,
margin: 0,
onStart: function () {
$(boxContainingForm).css("display", "table")
},
onComplete: function () {
$(boxContainingForm).parent().css("display", "table")
},
onClosed: function () {
$(boxContainingForm).css("display", "none")
}
}), $(boxContainingForm).addClass("lp-pom-root"), $(".lp-pom-form .lp-pom-button").click(function () {
o()
}), $(".lp-pom-form").keypress(function (n) {
13 == n.which && (n.preventDefault(), o())
})
});
</script>
*** Please Notice: ***
Don’t forget to activate the FancyBox library (e.g. screenshot)
***IMPORTANT***
Please select as Document = HEAD
The #lp-pom-box-295 – block should be HIDDEN and SHOWN after the click on the button
The #lp-pom-button-288 – button should show a popup after click the
*** NOTICE ***
You should add a HIDDEN block ID to the Button Action