Add a modal pop-up to your donation page

[ This is an advanced feature and requires some knowledge of HTML. ]

---

To add a modal pop up to your donation page when it loads, follow these steps: 

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

---

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. 

However, 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.  We have not yet developed a media manager for all your images, so to accomplish this you'll need to be creative.  

1. Go to the "Content" section of a donation page. 

2. Upload an image.  

3. "Preview" the page 

4. View the Page Source and get the URL to the secure image uploaded to your RaiseDonors account. 

5. 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>