Goal: A slick looking 18+ verification page:
1.) that does not hog up the root page
2.) will trigger no matter where someone enters your site
3.) uses cookies, so the user will only be asked once
Final Product: or see it live at www.SkinShare.com
Note: This is completely written in javascript, so if it is disabled it will not work.
I used a modified version of MoodalBox (which uses Mootools). The reason I had to modify MoodalBox slightly was to disable keyboard and mouse clicks, which would close the ‘popup’ without the user having to verify, so you might want to grab the latest version and do that on your own.
Step1: Download the demo zip file here: age_demo.zip
the .zip contains sexy files like:
/js/ (moodalbox + mootools js files)
/css/ (moodalbox style sheet)
/img/ (image files)
index.html
verify.html
Step2: What the balls do I do with these files?!?
On your main page put the following code beween the “head” area (make sure the .js .css + .html file paths match the setup of your website, this example assumes you’re unzipping the files to the root):
NOTE: This example will only work on a LIVE web server, not just as local files!
<script src="/js/mootools.js" type="text/javascript"></script>
<script src="/js/moodalbox.v1.2.full.js" type="text/javascript"></script>
<script language="JavaScript"> <!--
window.addEvent(\\\\\\\\\\\\\\\\\\\\\\\\\\'domready\\\\\\\\\\\\\\\\\\\\\\\\\\', testAge)
function testAge() { if ( ! get_cookie ( "verify" ) ) { MOOdalBox.open("/verify.html", "Your consent will be stored in a cookie", "500 320"); } }
function ofAge() { document.cookie = "verify=Yes; expires=15/02/2021 00:00:00"; MOOdalBox.close(); }
function get_cookie(cookie_name) { var results = document.cookie.match ( \\\\\\\\\\\\\\\\\\\\\\\\\\'(^|;) ?\\\\\\\\\\\\\\\\\\\\\\\\\\' + cookie_name + \\\\\\\\\\\\\\\\\\\\\\\\\\'=([^;]*)(;|$)\\\\\\\\\\\\\\\\\\\\\\\\\\' );
if ( results ) return ( unescape ( results[2] ) ); else return null; }
// -->
</script>
Step 3: And for for the verify.html code (this is the pop-up modal that will ask
the yes/no verification, and if the user hits no, redirects them to another url)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
#agreeCont P {font-family:'Trebuchet MS',Arial,sans-serif; font-size:13pt;}
#agreeCont A {font-weight: bold; color: #EB2B8E; font-family:'Trebuchet MS',Arial,sans-serif; font-size:14pt;}
</style>
</head>
<body>
<div id="agreeCont" style="height: 250px; width: 400px; padding: 10px 0 0 35px;">
<p style="margin-left: 80px;">
</p>
<p>This site is adult in nature. By continuing you are agreeing that you are over 18 years of age
and it is legal for you to do so in your country / state. </p>
<a href="#" onClick="ofAge();" style="float: left;">Yes, I'm at least 18.</a>
<a href="http://google.com/" style="float: right;">No, I am NOT Over 18.</a>
</div>
</body>
</html>
Final: And that’s it! You might want to handle a non-javascript route and remember that once you agree, a cookie is stored and you will not be asked to verify again until the cookie has been cleared. If you know what you’re doing go grab the latest version of MoodalBox and work with that.
this is cool I just could not make it work