Ad

OctoberCMS Pop Up Message Upon Page Load

- 1 answer

OctoberCMS has a handy pop up function from here https://octobercms.com/docs/ui/popup

While there is also AJAX handler that I found from here https://octobercms.com/docs/ajax/handlers

I am trying to make a pop up message once visitor visits my website on the homepage. However I cannot figure out the way to do it. I think I can use the AJAX handler to help where it says you can use onInit() but I failed to do it. Is there a proper and simple way to do such thing?

Ad

Answer

I guess you want to show them notification once when uservisit site for the first time.

yes, you don't need ajax for that you can use direct Modal API

<!-- popup markup -->
<div class="control-popup modal fade" id="contentBasic">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <p>This is a very basic example of a popup...</p>
            </div>
        </div>
    </div>
</div>

<!-- put scripts will make sure that it add script at very bottom of body tag -->
{% put scripts %}
<script>
// we need to show popup when document is fully loaded
$(document).ready(function() {
    // check key is exist or not if exist then we dont show popup 
    if(localStorage.getItem('isPopupShown') === null){

        // if key is not exist means user landed on page first time
        $("#contentBasic").modal('show');

        // mark popup is already showed to user
        localStorage.setItem('isPopupShown',1)
    }    
});
</script>
{% endput %}

This will show user popup once page is loaded (For first time only).

if still any issue please comment.

Ad
source: stackoverflow.com
Ad