Age verification popup window

Question

dbalas 0 Light Poster

11 Years Ago

Hi!

I have a question about pop up windows.

I am making a website for adult toys store. I need to add pop up window to the site which will ask visitor to confirm their age. If they are older than 21 thay can proceed to the site. If they are not, than when click Cancel button, browser tab will automaticaly close. This is the code i have:

<!DOCTYPE html>
<html>
<head>
<script>
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
  {

  }
else 
  {
  username=prompt("By entering your name and clicking Ok you confirm that you are older than 21 years. If you are under 21 years of age you are NOT ALLOWED to enter this website. Please enter your name:","");
  if (username!=null && username!="")
    {
    setCookie("username",username,365);
    }
  }
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>

This is where i found the example http://www.w3schools.com/js/tryit.asp?filename=tryjs_cookie_username .

This works great but i need to make some modifications and i am reeaally baad with javascript...

As you can see on the example link from w3schools, window is opened with basic pop up and Cancel and Ok buttons. My goal is to dimm the background more (set opacity to lets say 20%) and to close pop up window only if name is entered and Ok buton is clicked. If user clicks outside of window do nothing, if user clicks cancel close browser tab/window. Is it possible to do it with jquery so it looks nicer or to add style to this javascript window?

Thank you all for your help!

Dario

javascript

3 Contributors
4 Replies
4K Views
4 Months Discussion Span
Latest Post 11 Years Ago Latest Post by dowskee

pixelsoul 272 Red Pill

11 Years Ago

What if someone has javascript disabled on their browser? If it is then no one will see that age check and they will just see the website.

Yes, it would be possible to do it with jQuery as jQuery is just a javascript framework.

If I was doing this and I was doing an age check to be able to view the contents of the website, I would do it on a page before they could see the content of the site. I also wouldn't attempt to close the browser window but just redirect it off to another site (www.google.com for example).

If you are using PHP or another server side language it would be relatively easy to just ask for the age or to even ask "are you 21 or over" and then if yes, set the cookie. Doing it with something server side is going to ensure that anyone that comes to the website will see the warning for adult content and also see the age concent that they have to agree to.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

dbalas 0 Light Poster · Answer 1 · 2013-03-18T11:50:59+00:00

Hi!

Thank you for your reply. I am using Magento for the shop, and yes i want to require once on every page that user is redirected to the age verification page and than after the form is filled in to set cookie. The problem is that i am really bad with jquery and javascript so i am just browsing around the internet to find something that suits me. Found few interesting things but they all are showing on page load. Problem is that i dont know how to make them to set cookie... This is example code i have found and it is exactly what i need only thing is that i dont know how to set and check the cookie. Can you help me with pointing me to some link where i can find some tutorial or maybe you can give me advice what code to add?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple JQuery Modal Window from Queness</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>

$(document).ready(function() {  

    //Put in the DIV id you want to display
    launchWindow('#dialog1');

    //if close button is clicked
    $('.window #close').click(function () {
        $('#mask').hide();
        $('.window').hide();
    });     



    $(window).resize(function () {

        var box = $('#boxes .window');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        box.css('top',  winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);

    }); 

});

function launchWindow(id) {

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height());
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 


}

</script>

<style>
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}

#boxes .window {
  position:fixed;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}

#boxes #dialog1 {
  width:375px; 
  height:203px;
}

#dialog1 .d-header {
  background:url(images/login-header.png) no-repeat 0 0 transparent; 
  width:375px; 
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}

#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
}

#boxes #dialog2 {
  background:url(images/notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;
}
</style>
</head>
<body>

<div id="boxes">



<!-- Start of Login Dialog -->  
<div id="dialog1" class="window">
  <div class="d-header">
    <input type="text" value="username" onclick="this.value=''"/><br/>
    <input type="password" value="Password" onclick="this.value=''"/>    
  </div>
  <div class="d-blank"></div>
  <div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div>
</div>
<!-- End of Login Dialog -->  




<!-- Mask to cover the whole screen -->
  <div id="mask"></div>
</div>



</body>
</html>

Thank you in avance for your time and help.

Dario

dbalas 0 Light Poster · Answer 2 · 2013-03-18T13:33:45+00:00

Ok,

after browsing a bit i found a solution. And actually it is really simple one... So for all who will find this post useful, here it is...

First you need to download the jquery.cookie.js from here Click Here

and include it in the header of your page <link src="../js/jquery.cookie.js" type="text/javascript">.

than also in the header of all pages exept the page you have verification form you should put this code

<?php
if (
    !isset($_COOKIE['agreed'])||
    ($_COOKIE['agreed'] != 'true')
) {
    header('Location: http://domain.com/age-verification.php');
    exit;
}
?>

and your age-verification.php should look something like this:

<html>
<head><title></title>
</head>

<body>

<?php
    if (
        isset($_POST['agree_button'])&&
        ($_POST['agree_button'] == 'I agree')
    ) {
        setcookie('agreed', 'true');
        header('Location: /'); // redirect to main page
    }
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
    <p>Some Message Here</p>
    <input type="submit" value="I agree" name="agree_button" />
    <input type="button" value="I disagree" />
</form>

</body>
</html>

This worked for me, so i hope it helped someone else to...

dowskee 0 Newbie Poster · Answer 3 · 2013-07-29T20:58:44+00:00

This is exactly what I've been searching for but havent been able to figure out! Using Magento Go:
1. I downloaded the jquery and uploaded the js thru the admin page.
2. Created the age-verification.html

As far as adding <link src="../js/jquery.cookie.js" type="text/javascript"> to the age-verification page, is this neccessary since I've already uploaded the jquery? If not, the question I have is how to call the uploaded jquery in the age-verification page...

And last, how do I add that header script to all pages except for the age-verification page as you suggested? From what I understand, adding it as a miscellaneous script under 'System --> Design' adds it to all pages..