Geolocation Modal Specifications

Libraries

• Easy Modal - for creating the modal that the alert appears in. The library needs to be put in the template.
• ipinfo.io - looks up the user's geolocation. Allows for 1,000 requests/day.

Javascript

Add jquery.easymodal.js to the head element of the site

This script looks for a cookie that has stored the locale of user. If none are found, it looks up the geolocation and creates the correct prompt as well as sets a cookie to prevent the pop-up on other pages.

<script>
if(document.cookie.replace(/(?:(?:^|.*;\s*)locale\s*\=\s*([^;]*).*$)|^.*$/, "$1") == "canada" || document.cookie.replace(/(?:(?:^|.*;\s*)locale\s*\=\s*([^;]*).*$)|^.*$/, "$1") == "usa"){
    // look up cookies to see if a locale has already been set
    }else {
        $.get('http://ipinfo.io', function(response) {
        if(response.country == 'CA') {
    //If no locale was found, looks up the location to trigger the corrent modal and sets a cookie
       $('#modalCA').trigger('openModal');
       document.cookie ="locale=canada; path=/;";   
    } else if (response.country == 'US') {
    //This clause triggers the US modal and cookie
        $('#modalUS').trigger('openModal');
        document.cookie ="locale=usa; path=/;"; 
    }
    else {
    //If the user is from neither Canada nor US, no action is taken.
        }
    }, 'jsonp');
}
</script>

This script creates the modal that prompts the user to decide their next action.

<script>
$('#modalCA,#modalUS').easyModal({
	top: 200,
	overlay : 0.2
});
$('.modal').click(function(e){
	$('.modal').trigger('closeModal');
	e.preventDefault();
});
>/script>

HTML Elements

The javascript above will call the modal below. There is a separate modal depending on the country.

<div id="modalCA" class="modal">
  <p>It looks like you're visiting from Canada.</p> <p>Do you want to visit the School Messenger Canada site?</p>
  <p><a href="www.schoolmessenger.ca">Yes! Take me to SchoolMessenger Canada</a></p>
  <p><a href="#" id="closeModal">No, stay on SchoolMessenger US</a></p>
</div>

<div id="modalUS" class="modal">
  <p>It looks like you're visiting from the United States of America.</p> <p>Do you want to visit the School Messenger US site?</p>
  <p><a href="www.schoolmessenger.com">Yes! Take me to SchoolMessenger US</a></p>
  <p><a href="#" id="closeModal">No, stay on SchoolMessenger Canada</a></p>
</div>

This modal can be styled as so

.modal {
	background: #fff;
	text-align: center;
	width: 600px;
	padding: 5px 0;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}