dubrod/jQuery Over 21 Dialog Checker

## jQuery Over 21 Dialog Checker
<!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>
	<!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>