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 after the </section> tag you just found.
<div id="popup" class="modal fade" role="dialog" style="z-index:99999;">
<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 scripts:
<script type="text/javascript" src="js/RSCookies-min.js"></script>
<script type="text/javascript">
var strcookie = ReadCookie("MyPopUp");
if (strcookie.length == 0) {
$(window).load(function(){
setTimeout(function(){
$('#popup').modal('show');SetCookie('MyPopUp','Opened',0.001);
}, 2000);
});
}
</script>
Upload the supplied library file (RSCookies-min.js) to a sub-folder named js in your online site.
NOTE: The pop-up will only appear once per browser session. If the browser is closed then the pop-up will appear again the next time the page is accessed. This will not work locally, only when published to your web server.
IMPORTANT! This facility writes a cookie to the visitors browser cache, so you must notify the user that you use cookies to comply with the GDPR.
Job Done!
Publish or Preview the page and admire your work!
