Age Verification Pop up

HTML & CSS
1

I face 2 problems,
a) browser don’t recognizes Greek language or font, it appears like glyph ← strange, i could read the Greek here, but couldnt on my Computer browseres… heeeaee ?
b) Instead of the faded background text, how would I show a faded photo? cover?
c) retesting it, warning message gone, probably cookies? is there another way to test or do i have to delete coockis every time?

Thanks !

[quote=“SEE, post:1, topic:244182, full:true”]
I face 2 problems,
a) browser don’t recognizes Greek language or font, it appears like glyph ← strange, i could read the Greek here, but couldnt on my Computer browseres… heeeaee ?
b) Instead of the faded background text, how would I show a faded photo? cover?
c) retesting it, warning message gone, probably cookies? is there another way to test or do i have to delete coockis every time?

Thanks !


<!DOCTYPE html>
<HTML lang="el-GR">
<html>
<head>
<title>Overlay Demo</title>
<style type="text/css">
* { font-size: x-large; }

#overlay {
	display: block;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
        color: white;
	z-index:1001;
	-moz-opacity: 0.7;
	opacity:.70;
	filter: alpha(opacity=70);
}
</style>
</head>
<body>
<div id="overlay">
    <center>
        <br/><br/><br/><br/>
        ΠΑΤΩΝΤΑΣ <input type="button" id="ofAge" value="ΕΔΩ" />
        Δηλόνω πως είμαι 18 ετών και άνο<br/>
        και επιθυμώ να δώ το περιεχώμενο.</br>
    </center>
</div>

Ooohhhh...look at all the goodies on this site!
<br/><br/>
Ooohhhh...look at all the goodies on this site!
<br/><br/>
Ooohhhh...look at all the goodies on this site!
<br/><br/>
Ooohhhh...look at all the goodies on this site!
<br/><br/>
Ooohhhh...look at all the goodies on this site!
<br/><br/>
Ooohhhh...look at all the goodies on this site!
<br/><br/>
Ooohhhh...look at all the goodies on this site!
<br/><br/>
Ooohhhh...look at all the goodies on this site!
<br/><br/>
Ooohhhh...look at all the goodies on this site!
<br/><br/>

<script type="text/javascript">
var pop = document.getElementById("overlay");

if ( document.cookie.indexOf("CERTIFIEDAGE18") >= 0 ) 
{
     pop.style.display = "none";
}

document.getElementById("ofAge").onclick = function() 
{
     document.cookie = "CERTIFIEDAGE18=true";
     // should add document.cookie.expires
     // as is, this will just be a session cookie

    pop.style.display = "none";
}
</script>
</body>
</html>
2

You should define the character set in the head, try utf-8.
Also you have two opening html tags.

2 Likes
3

You the man Sam !!! solved !!

<!DOCTYPE html>
<html class="height-full">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
	<!-- Title -->
    <title>Age Verification</title>
	<style type="text/css">
* { font-size: x-large; }
#overlay {
	display: block;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
        color: white;
	z-index:1001;
	-moz-opacity: 0.7;
	opacity:.70;
	filter: alpha(opacity=70);}
</style>
</head>
<body>
<div id="overlay">
    <center>
        <br/><br/><br/><br/>
        ΠΑΤΩΝΤΑΣ <input type="button" id="ofAge" value="ΕΔΩ" />
        Δηλώνω οτι είμαι άνο τον 18 ετών <br/>
        και επιθυμώ να δώ το περιεχώμενο.</br>
    </center>
</div>
ΤΕΣΤ ΤΕΣΤ TEST TEST TEST ΤΕΣΤ ΤΕΣΤ ΕΛΛΗΝΗΚΑ ΓΡΑΜΜΑΤΑ ΤΕΣΤ ENGLISH LETTERS TESTING
<br/><br/>
ΤΕΣΤ ΤΕΣΤ TEST TEST TEST ΤΕΣΤ ΤΕΣΤ ΕΛΛΗΝΗΚΑ ΓΡΑΜΜΑΤΑ ΤΕΣΤ ENGLISH LETTERS TESTING
<br/><br/>
ΤΕΣΤ ΤΕΣΤ TEST TEST TEST ΤΕΣΤ ΤΕΣΤ ΕΛΛΗΝΗΚΑ ΓΡΑΜΜΑΤΑ ΤΕΣΤ ENGLISH LETTERS TESTING
<br/><br/>

<script type="text/javascript">
var pop = document.getElementById("overlay");

if ( document.cookie.indexOf("CERTIFIEDAGE18") >= 0 ) 
{
     pop.style.display = "none";
}

document.getElementById("ofAge").onclick = function() 
{
     document.cookie = "CERTIFIEDAGE18=true";
     // should add document.cookie.expires
     // as is, this will just be a session cookie

    pop.style.display = "none";
}
</script>
</body>
</html>

Now Bonus Question… in Firefox pop up doesn’t show up, i deleted cookies… in Opera Browser I can test and retest and it works fine…

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.