Display your Unbounce form or any inline content in a lightbox without creating a new page (set placement to 'head')

ub-inline-content-lightbox.js

<script>
 
  //Unbounce inline content lightbox v2.0
  //ubContentLightbox('boxContainingForm', 'buttonToTriggerLightbox');
  
  ubContentLightbox('#lp-pom-box-113', '#lp-pom-button-29');
  ubContentLightbox('#lp-pom-box-120', '#lp-pom-button-121');
  
  document.write('<style type="text/css"> #fancybox-outer {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}</style>');

  function ubContentLightbox(boxContainingForm, buttonToTriggerForm) {

  document.write('<style type="text/css">' + boxContainingForm + '{display:none}</style>');

  $(function() {
    var boxWidth = $(boxContainingForm).width();
    var boxHeight = $(boxContainingForm).height();
    var borderWidthTop = $(boxContainingForm).css('border-top-width');
    var borderWidthBottom = $(boxContainingForm).css('border-bottom-width');
    var borderWidthLeft = $(boxContainingForm).css('border-left-width');
    var borderWidthRight = $(boxContainingForm).css('border-right-width');
    var borderRadius = $(boxContainingForm).css('border-top-left-radius');

    var borderHeight = parseFloat(borderWidthTop) + parseFloat(borderWidthBottom);
    var borderWidth = parseFloat(borderWidthLeft) + parseFloat(borderWidthRight);
    var borderRadiusValue = parseFloat(borderRadius);

    boxWidth = parseFloat(boxWidth) + borderWidth;
    boxHeight = parseFloat(boxHeight) + borderHeight;

    if (borderRadiusValue > 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': false,
      'width': boxWidth,
      'height': boxHeight,
      'autoScale': false,
      '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');


  });

}

$(function() {
  function triggerFormEvent() {
    if (lp.jQuery('form').valid() == true) {
      $.fancybox.close();
    }
  }


  $('.lp-pom-form .lp-pom-button').click(function() {
    triggerFormEvent();
  });

  $('.lp-pom-form').keypress(function(event) {
    if (event.which == 13) {
      event.preventDefault();
      triggerFormEvent();
    }
  });

});

</script>