<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- <span class="close">×</span> -->
<h2 style="font-size: 32px; color: #4a8ba8; padding: 0 0 0.5em 0; text-align: center; font-family: sans-serif;">We just need one thing first...</h2>
<!-- act-on FORM here -->
PASTE FORM EMBED CODE HERE
</div>
</div>
<script>
// delay until form is actually loaded on page
setTimeout(function(){
$("#myModal").css("display", "block");
// on submit, send this form to iframe (do not redirect)
$("form").attr("target", "dummyframe");
$("form").css("font-family", "Raleway, sans-serif");
$("form").submit(function(event) {
// make sure form is not empty
$('input[type="text"]').each(function(){
if($(this).val()!== ""){
$("#myModal").css("display", "none");
}
});
});
}, 3000);

// To create a longer delay before the modal appears, change this value: 3000 to a larger number, such as 6000
</script>

What this code is doing: 

• Creates the modal pop-up window.
• Has a placeholder form already embedded.
• Makes the modal popup window appear after 3 seconds.
• Manipulates the Act-On form such that the page does not refresh after submit.
• After form submit, the modal disappears.

Should look like this:

5. Replace this block with your form code:

Code that needs to be replaced:

        <!-- act-on FORM here -->
        PASTE FORM EMBED CODE HERE

You will need to replace this block with whatever form “embedded” code you would like to use. 

The form will not work with the pop-up if your Act-on account does not have a custom marketing domain. 

How to get your form embedded code:

1. Go create a form within Act-On of your choosing
2. Select “embed” in the upper right of the navigation bar
   
3. Select “Embed Code” at the middle center of screen.
   
4. Hit the “Copy Code” button in the right vertical bar. 
   
5. Then paste in desired place mentioned above.

<div style="height: 1000px; margin-top: 4em;">
<iframe style="width: 100%; height: 800px;" src="REPLACE THIS TEXT IN BETWEEN THE QUOTES WITH A PDF URL"></iframe>
</div>

<!-- dummy destination; no redirect on submit -->
<iframe width="0" height="0" border="0" name="dummyframe" id="dummyframe"></iframe>

What this code is doing:

• Embedding an iframe that will hold your content (pdf).
• Creating additional functionality that allows the page to not refresh after form submit.

Should look like this:

3. Replace the iframe src code (highlighted example below) with your asset URL. (Must be .pdf)

Paste this code into the CSS:

Styling Code

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 0 auto;
padding: 20px;
border: 1px solid #888;
font-size: 12px;
width: 600px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

What this code is doing: 

• Styling your modal pop-up window and allowing it to show and hide according to user actions.

Should look like this: