Last active
January 25, 2016 14:09
-
-
Save dubrod/6380349 to your computer and use it in GitHub Desktop.
Completely jQuery Over 21 Dialog Check
This file contains hidden or 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
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>Over 21 script</title> | |
<style type="text/css"> | |
#ageCheckWrapper{ | |
width: 100%; | |
height: 100%; | |
position: fixed; | |
background: rgba(0,0,0,0.8); | |
} | |
#ageCheckModal{ | |
width: 50%; | |
height: auto; | |
margin: 4% 0 0 -25%; | |
padding: 1%; | |
position: absolute; | |
left: 50%; | |
background: #FFF; | |
border-radius: 10px; | |
border: 3px solid #000; | |
box-shadow: 3px 3px 3px #111; | |
} | |
.required{ | |
background: red; | |
} | |
.tooYoung{ | |
display: block; | |
background: #f1e1e1; | |
border: 1px solid #da5353; | |
padding: 10px; | |
color: #000; | |
font-size: 15px; | |
text-align: center; | |
border-radius: 10px; | |
display: none; | |
} | |
</style> | |
<!-- link in jquery file --> | |
<script src="jquery.js"></script> | |
<!-- link in cookie js | |
* jQuery Cookie Plugin v1.3.1 | |
* https://github.com/carhartl/jquery-cookie | |
--> | |
<script src="jquery.cookie.js"></script> | |
<script> | |
$(document).ready( function(){ | |
//variables | |
agelimit = 21; | |
currdate = new Date(); | |
currdate.setFullYear(currdate.getFullYear() - agelimit); | |
//if previous cookie check | |
var ageCookie = $.cookie('ageCheckCookie'); | |
if(ageCookie){ | |
//hide the age check | |
$("#ageCheckWrapper").hide(); | |
//console.log("currdate "+currdate); | |
//console.log("ageCookie "+ageCookie); | |
} else { | |
//start age check submission | |
$("#submitAge").click(function(){ | |
//validation | |
if(!$("#dob_month").val()){ | |
$("#dob_month").addClass("required"); | |
return false; | |
} | |
if(!$("#dob_day").val()){ | |
$("#dob_day").addClass("required"); | |
return false; | |
} | |
if(!$("#dob_year").val()){ | |
$("#dob_year").addClass("required"); | |
return false; | |
} | |
//form variables | |
var month = $("#dob_month").val(); | |
var day = $("#dob_day").val(); | |
var year = $("#dob_year").val(); | |
var mydate = new Date(); | |
mydate.setFullYear(year, month-1, day); | |
//console.log(mydate); | |
//console.log(currdate); | |
if(mydate > currdate){ | |
//too young | |
//console.log("too young"); | |
$(".tooYoung").show(); | |
} else { | |
//over 21 | |
//console.log("over 21"); | |
$.cookie('ageCheckCookie', mydate, { expires: 7, path: '/' }); | |
$("#ageCheckWrapper").hide(); | |
} | |
}); | |
} // eof if ageCookie | |
//append years dynamically | |
var today = new Date(); | |
dynamicYear = today.getFullYear(); | |
$("#dob_year").append("<option value="+dynamicYear+">"+dynamicYear+"</option>"); | |
for ( var i = 1; i < 100; i++ ) { | |
var rowYear = ""; | |
var rowYear = dynamicYear-i; | |
$("#dob_year").append("<option value="+rowYear+">"+rowYear+"</option>"); | |
} | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="ageCheckWrapper"> | |
<div id="ageCheckModal"> | |
<p> | |
YOU MUST BE OF LEGAL DRINKING AGE TO ENTER THIS SITE. PLEASE PRESENT YOUR ID BY ENTERING YOUR DATE OF BIRTH BELOW. | |
</p> | |
<select id="dob_month"> | |
<option value="">Month</option> | |
<option value="1">January</option> | |
<option value="2">February</option> | |
<option value="3">March</option> | |
<option value="4">April</option> | |
<option value="5">May</option> | |
<option value="6">June</option> | |
<option value="7">July</option> | |
<option value="8">August</option> | |
<option value="9">September</option> | |
<option value="10">October</option> | |
<option value="11">November</option> | |
<option value="12">December</option> | |
</select> | |
<select id="dob_day"> | |
<option value="">Day</option> | |
<option value="1">1</option> | |
<option value="2">2</option> | |
<option value="4">3</option> | |
<option value="5">4</option> | |
<option value="6">5</option> | |
<option value="7">6</option> | |
<option value="8">7</option> | |
<option value="9">8</option> | |
<option value="0">9</option> | |
<option value="10">10</option> | |
<option value="11">11</option> | |
<option value="12">12</option> | |
<option value="13">13</option> | |
<option value="14">14</option> | |
<option value="15">15</option> | |
<option value="16">16</option> | |
<option value="17">17</option> | |
<option value="18">18</option> | |
<option value="19">19</option> | |
<option value="20">20</option> | |
<option value="21">21</option> | |
<option value="22">22</option> | |
<option value="23">23</option> | |
<option value="24">24</option> | |
<option value="25">25</option> | |
<option value="26">26</option> | |
<option value="27">27</option> | |
<option value="28">28</option> | |
<option value="29">29</option> | |
<option value="30">30</option> | |
<option value="31">31</option> | |
</select> | |
<select id="dob_year"> | |
<option value="">Year</option> | |
</select> | |
<button id="submitAge">SUBMIT YOUR DATE OF BIRTH</button> | |
<p class="tooYoung">Sorry, You must be 21 Years of age to view this site.</p> | |
</div> | |
</div> | |
<p style="padding: 2%; text-align:center; line-height: 2em; font-size: 15px;"> | |
My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand? - slipsum.com | |
</p> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment