I designed an age verification popup with the help of some online tutorials and a friend due to my limited knowledge of JavaScript.
Check it out live here-
My issue is that I want this popup to load/appear after the page content loads, but I'm not sure how to implement it.
JavaScript Code-
<script type="text/javascript">
function confirmAge(){
var d = new Date();
//var time_stmp = Math.round(d.getTime()/1000);
var now_us = d.getTime();
var myDate=document.getElementById('day').value +"-"+ document.getElementById('mon').value +"-"+ document.getElementById('yer').value;
myDate=myDate.split("-");
var newDate=myDate[1]+"/"+myDate[0]+"/"+myDate[2];
var date_us=new Date(newDate).getTime();
var age_us=(now_us-date_us)/(1000*356*24*3600);
if(age_us<18){
alert("You must be 18 years of age to see this site.");
return false;
}
else
document.getElementById('ac-wrapper').style.display="none";
}
</script>
CSS Stylesheet-
<style>
#ac-wrapper {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 820px;
background: rgba(255,255,255,.6);
z-index : 1001;
}
#popup{
width: 555px;
height: 375px;
background: #FFFFFF;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 150px; left: 375px;
}
#popup_logo{
position: relative;
left: 130px; top: 30px;
}
#popup_form{
text-align: center;
}
#popup_submit{
width: 120px;
height: 47px;
background: url(images/Enter-button.png) no-repeat;
cursor: pointer;
border: 0px;
}
p{
font: bold 20px Tahoma;
color: #000;
text-align: center;
}
</style>
HTML Markup-
<div id="ac-wrapper">
<div id="popup"> <img src="images/store_logo.png" alt="D elicious Liquid Vapor" id="popup_logo"><br />
<br />
<br />
<br />
<p>To play with the bull, you must be 21 years of age.<br />
Please enter your birth date...</p>
<br />
<div id="popup_form">
<select name="birthmonth" id='mon'>
<option value="1">January</option>
......................
<option value="12">December</option>
</select>
<select name="birthday" id='day'>
<option value="1">1</option>
<option value="2">2</option>
.....................
<option value="31">31</option>
</select>
<select name="birthyear" id="yer">
<option value="2007">2013</option>
..............
<option value="1900">1900</option>
</select>
<br />
<br />
<input type="button" id="popup_submit" name="submit" value="" onClick="confirmAge()" />
</div>
</div>
</div>