How Do I Add A Modal Pop-up On My Donation Page?

Adding a modal pop-up to your donation page is a great way to:

• Show a focused display of an important message that the viewer can quickly dismiss. 
• Offer instant feedback that someone's donation has gone through or other information without redirecting them to a different page.

For example: When someone submits their donation, they could see this:

Note: This is an advanced feature and requires some knowledge of HTML.

To add a modal pop-up to your donation page when it loads: 

• Go to the "Design" step in the Page Builder.
• Scroll down and click the "This page needs custom Javascript" checkbox. 
• Copy and paste the following blue code in the textbox:

<script>
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>

<div id="myModal" class="modal fade image center" role="dialog">
<div class="modal-dialog">

<div class="modal-content">
<img src="http://placehold.it/1000x800" class="img-fluid">
</div>

</div>
</div>

To customize this code:

You will need to replace the "http://placehold.it/1000x800" with a direct link to the image you wish to display in the pop-up. 

This image must be on a secure server or your donors will be told that the donation page is not fully secure. 

You can use an image uploaded to your RaiseDonors account. While there's not a media manager in RaiseDonors, there is a creative solution to accomplish this.  

• Go to the "Content" section of a donation page. 
• Upload an image.
• "Preview" the page.
• View the Page Source and get the URL to the secure image uploaded to your RaiseDonors account.
• Copy the URL to that image and paste it into the pop up code.  

Add a close "x" to the modal:

You may add a closing "x" at the top of the page by adding the blue code below: 

<div id="myModal" class="modal fade image center" role="dialog">
<div class="modal-dialog">
<div class="modal-content">

<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="padding-bottom: 10px;">
<span aria-hidden="true">&times;</span>
</button>

<img src="http://placehold.it/1000x800" class="img-fluid">

</div>
</div>
</div>