<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:

4. Then, 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. In Act-On, create or edit the form you want.
2. Click the Embed tab at the upper right of the navigation bar:
   
3. Select EMBED CODE at the middle center of the screen.
   
4. On the right, click COPY CODE:
   
5. Then paste in the location 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: