Difference between revisions of "Age Popup"

From KOP KB
Jump to: navigation, search
 
Line 1: Line 1:
Source:http://www.wikihow.com/Create-a-Simple-CSS-Popup-in-Your-Web-Page
 
  
http://knightsofprocrastination.ca/yes.png
 
  
http://knightsofprocrastination.ca/no.png
+
<syntaxhighlight lang="javascript">
 
 
<syntaxhighlight lang="html4strict">
 
<html>
 
<head>
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
 
 
<script>
 
<script>
+
function setCookie(cname, cvalue, exdays) {
$(document).ready(function(){
+
     var d = new Date();
+
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
     $( ".popup_img_yes" ).click(function() {
+
    var expires = "expires="+d.toUTCString();
                $( ".popup" ).fadeOut( 1200 );
+
    document.cookie = cname + "=" + cvalue + "; " + expires;
  });
 
 
  $( ".popup_img_no" ).click(function() {
 
                window.history.back();
 
  });
 
 
});
 
 
</script>
 
<style>
 
 
.popup{
 
position:fixed;
 
width:100%;
 
height:100%;
 
left:0px;
 
right:0px;
 
top: 0px;
 
bottom:0px;
 
background-color:rgba(3,3,3,0.8);
 
 
}
 
}
+
 
.popupWindow{
+
function getCookie(cname) {
background-color:white;
+
    var name = cname + "=";
margin:0px auto;
+
    var ca = document.cookie.split(';');
width:40%;
+
    for(var i=0; i<ca.length; i++) {
min-width:400px;
+
        var c = ca[i];
min-height:300px;
+
        while (c.charAt(0)==' ') c = c.substring(1);
margin-top:12%;
+
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
text-align: center;
+
    }
-moz-border-radius: 50px 50px / 50px 50px;
+
    return "";
border-radius: 50px 50px / 50px 50px;
 
box-shadow: 10px 10px 5px #000;
 
 
}
 
}
+
var agecookie = getCookie("age");
.popup_txt{
+
 
font-size:26px;
+
if (agecookie != "true"){
font-weight:bold;
+
var age = prompt("How old are you?");
margin:10px;
+
//check the age of the user and produces proper output
padding-top:100px;
+
document.write(agecookie);
color:green;
+
 
 +
if (age >= 18)
 +
{
 +
    alert("YOU CAN CONTINUE");
 +
setCookie("age","true",2);
 
}
 
}
+
else
.popup_img{
+
{
maring:10px;
+
    window.location.replace("http://google.com");
 
}
 
}
 
.popup_img_yes,.popup_img_no{
 
margin:20px;
 
 
}
 
}
+
</script>
</style>
 
</head>
 
<body>
 
 
 
<div class="popup"> <!-- popup content start || copy this to the end of the file-->
 
        <div class="popupWindow">
 
                <div class="popup_txt">
 
                        Are you 18 years of age or older?
 
                </div>
 
                <div class="popup_img">
 
                        <img src="yes.png" class="popup_img_yes"/>
 
                        <img src="no.png" class="popup_img_no"/>
 
                </div>
 
        </div>
 
</div>  <!-- popup content ends -->
 
</body>
 
</html>
 
 
</syntaxhighlight>
 
</syntaxhighlight>

Latest revision as of 22:32, 19 November 2014


<script>
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return "";
}
var agecookie = getCookie("age");

if (agecookie != "true"){
var age = prompt("How old are you?");
//check the age of the user and produces proper output
document.write(agecookie);

if (age >= 18)
{
    alert("YOU CAN CONTINUE");
	setCookie("age","true",2);
}
else
{
    window.location.replace("http://google.com");
}
}
</script>