1. On the page you want the pop-up to appear when loaded select one of the blocks on the page and open the Code Editor, then look for the </section> tag.
2. Insert the code below (this code is in the attached text file to make it easier to copy) by copying it and pasting it just before the </section> tag you just found.
<div id="popup" class="modal fade" role="dialog">
<div class="modal-dialog" style="width:670px;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">POP UP TITLE!</h4>
<button type="button" style="text-align:right;" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" style="text-align:center;">
<h1 style="text-align:center;font-weight:700;font-size:18px;">POP UP CONTENTS!<br>Your text here<br>
for the message in the popup..</h1><br>
<h2 style="text-align:center;font-size:18px;">More Message.</h2><br>
</div>
<div class="modal-footer">
<button style="vertical-align:middle;" type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div></div>
Replace the text in bold with your content for the pop-up. This is HTML so can include HTML for images and videos etc.
3. In the ‘End of Body’ section of the page settings add the following script:
<script type="text/javascript">
$(window).load(function(){
setTimeout(function(){
$('#popup').modal('show');
}, 2000);
});
</script>
Job Done!
Publish or Preview the page and admire your work!
