marketo modal

by jwbworks

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				 <h2>Marketo Form Lightbox</h2>
<!-- Start Marketo Form -->
				<div class="modal-form">
					<a type="button" 
						class="cta-button" id="789" data-form-id="1619" data-success-url="http://www.google.com"
						data-form-result="blank" data-toggle="modal" 
						data-target="#mktoForm_789-modal">
						New Url Self
					</a>
					<div class="modal fade modal-form" id="mktoForm_789-modal" tabindex="-1" role="dialog">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<div class="logo"></div>
									<h4>Test Form Title</h4>
									<button type="button" class="close x-button" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&nbsp;</span>
									</button>
								</div>
								<div class="modal-body">
									<div class="modal-form-content" id="modal-mktoForm_789-intro">
										<h2>Test Form Title</h2>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut lectus feugiat, ullamcorper libero ut, dignissim quam. In hac habitasse platea dictumst. In ac rhoncus enim, vehicula gravida odio. Pellentesque diam justo, fermentum sed massa vitae, volutpat vulputate felis. Nulla volutpat, lectus et sollicitudin vulputate, tortor justo bibendum ante, sit amet volutpat purus neque quis eros. Pellentesque enim elit, tempus id ipsum nec, rutrum ullamcorper diam. Morbi a eros venenatis, molestie dolor sodales, tempus risus. Mauris volutpat urna ac neque pharetra, eget feugiat lectus lobortis. Vivamus eu sem eu purus imperdiet feugiat vitae eu nibh.</p>
									</div>
									<div class="modal-form-holder"></div>
									<div class="modal-form-content"...

CSS

/* McGraw Hill Education Branding Style Guide */
/* Website Style Guide */
.modal-form.modal {
  z-index: 9999;
}
.modal-form.modal > .modal-dialog {
  height: 100%;
}
.modal-form.modal > .modal-dialog .modal-sucess-msg {
  background-color: #fff;
  padding: 15px;
  margin: 150px 0 0;
  display: none;
}
.modal-form.modal > .modal-dialog .modal-content {
  background-color: #eaeaea;
  border: 1px solid #777;
  padding: 10px;
  height: 85%;
  overflow: initial;
}
.modal-form.modal > .modal-dialog .modal-header {
  height: 60px;
  border-bottom: 0 none transparent;
  padding: 0;
}
.modal-form.modal > .modal-dialog .modal-header .logo {
  background-repeat: no-repeat;
  background-image:...

JavaScript

window.MHE = window.MHE || {};

window.MHE.ModalForm = (function ($, window, document) {
	"use strict";
	
	var pluginName = "ModalForm",
		overlayOpenStatus = false;
	/*
	 * Modal Form constructor
	 * */
	 function ModalForm(){
		this.init();
	}
	
	ModalForm.prototype.init = function(){
		if (typeof MktoForms2 == "undefined"){
			var head= document.getElementsByTagName('head')[0];
			var script= document.createElement('script');
			script.type= 'text/javascript';
			script.src= '//app-ab13.marketo.com/js/forms2/js/forms2.js';
			head.appendChild(script);
			var everythingLoaded = setInterval(function() {
				if (/loaded|complete/.test(document.readyState)) {
					clearInterval(everythingLoaded);
					$(".cta-button").click(function( e ){
						ModalForm.prototype.initForm($( this ));
					});
					
				}
			}, 10);
		}
	};
	
	ModalForm.prototype.initForm = function(item) {
			var formModal = $(item).parent(),
				formLink =  $(item),
				formTarget = $(formLink).attr('data-target'),
			    formID = $(formLink).attr('data-form-id') || "",			
			    formResult = $(formLink).attr('data-form-result') || "blank",
			    formSucessUrl = $(formLink).attr('data-success-url') || '',
			    formCloseBtn = $(formTarget).find(".close.x-button"),
			    formRedir = false,
			    formHolder = $(formTarget).find('.modal-form-holder'),
				formHtml = "<form id='mktoForm_" + formID + "'></form>",
				currentModal = $(formTarget).find(".modal");
			
			if (formSucessUrl.length > 0){
				formRedir = true;
			}
				
			$(formHolder).append(formHtml);	
			
			$(formTarget).on('hidden.bs.modal', function () {
			  $(".modal-form-holder").empty();	
			  $('form.mktoForm').remove();
			  $('#mktoStyleLoaded').remove();
			  $('iframe#MktoForms2XDIframe').remove();
			})
				
			MktoForms2.loadForm("//app-ab13.marketo.com", "754-FXO-315", formID, function (form){ 
				form.onSuccess(function(values, followUpUrl){
					$(formTarget).find(".modal-content").fadeOut('fast');
					if...