Created
April 15, 2014 15:13
-
-
Save christophergregory/10740490 to your computer and use it in GitHub Desktop.
Shopify Modal Age Verification
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
#verify { | |
position: absolute; | |
top: 0; | |
left: 0; | |
background: rgba(67, 157, 207, 0.9); | |
z-index: 200; | |
width: 100%; | |
height: 100%; | |
} | |
#verify .age { | |
width: 500px; | |
margin: 10% auto 0; | |
padding: 15px; | |
background: black; | |
border-radius: 5px; | |
} | |
#verify .age h2 { | |
margin-bottom: 15px; | |
} | |
#verify .age input[type=submit] { | |
color: #000000; | |
} | |
#verify .denied { | |
display: none; | |
padding-top: 15px; | |
color: #ffa000; | |
} | |
</style> | |
<div id="verify"> | |
<div class="age"> | |
<form> | |
<h2>Please Verify Your Age</h2> | |
<select name="month" id="month"> | |
<option value="0">January</a> | |
<option value="1">February</a> | |
<option value="2">March</a> | |
<option value="3">April</a> | |
<option value="4">May</a> | |
<option value="5">June</a> | |
<option value="6">July</a> | |
<option value="7">August</a> | |
<option value="8">September</a> | |
<option value="9">October</a> | |
<option value="10">November</a> | |
<option value="11">December</a> | |
</select> | |
<select name="day" id="day"> | |
{% for day in (1..31) %} | |
<option value="{{ day }}">{{ day }}</option> | |
{% endfor %} | |
</select> | |
{% assign this_year = 'now' | date: "%Y" %} | |
<select name="year" id="year"> | |
{% for year in (1900..this_year) %} | |
<option value="{{ year }}">{{ year }}</option> | |
{% endfor %} | |
</select> | |
<br> <br> | |
<input type="submit" value="Submit"> | |
</form> | |
<div class="denied"> | |
Sorry, but you do not meet the minimum age requirement to view this website. | |
</div> | |
</div> | |
</div> | |
<script type="text/javascript"> | |
$(document).ready(function () { | |
var age_form = $('#verify .age form'), | |
modal = $('#verify'); | |
if ( localStorage.getItem('isOldEnough') === 'yes' ) { | |
modal.remove(); | |
} | |
function meetsMinimumAge(birthDate, minAge) { | |
var tempDate = new Date(birthDate.getFullYear() + minAge, birthDate.getMonth(), birthDate.getDate()); | |
return (tempDate <= new Date()); | |
} | |
age_form.submit(function(e){ | |
e.preventDefault(); | |
var $this = $(this), | |
month = parseInt($this.find('select[name=month]').val(), 10), | |
day = parseInt($this.find('select[name=day]').val(), 10), | |
year = parseInt($this.find('select[name=year]').val(), 10), | |
birthday = new Date(year, month, day); | |
if ( meetsMinimumAge(birthday, 18) ) { | |
modal.remove(); | |
localStorage.setItem('isOldEnough', 'yes'); | |
} else { | |
modal.find('.denied').fadeIn('fast'); | |
} | |
}); | |
$('#verify') | |
.height( $(document).height() ) | |
.width( $(document).width() ); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thanks g