Así que tengo una ventana emergente de verificación de edad en una página web, la ventana emergente se mostrará en cualquier página web en la que accedas. El problema que tengo es que no puedo entender cómo mostrarlo solo en la primera página del usuario. He buscado utilizar cookies para lograr esto, pero no he podido entender cómo adaptar el código actual que tengo. Necesito una solución que no requiera complementos si es posible. Gracias de antemano.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
    color: #555555;
    /* text-align: justify; */
    font-size: 20px;
    font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});




$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
</script>
<script>
function goBack() {
    window.history.go(-2);
}
</script>
<div class='popup'>
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
You must be over 18 to Purchase products on this website!
<br/>
<br/>
<a href='' class='close' style="color:green">I Am Over 18</a>
<a href='' class='goBack()' style="color:red">I Am Not</a>
</p>
</div>
</div>
0
SelectiveIntuition 14 sep. 2018 a las 12:23

3 respuestas

La mejor respuesta

El uso de cookies es el enfoque correcto. Puede configurar una cookie simple usando p. document.cookie = "verified=true"; que se establece después de que la confirmación de edad se realiza correctamente.

Al comienzo de cada página, verifique si la cookie existe y si document.cookie == "verified=true"

Tenga en cuenta que cualquier restricción de acceso realizada con JavaScript se puede omitir fácilmente.

1
dmuensterer 14 sep. 2018 a las 09:37

Coloca una cookie en la carga de la página y en todas las páginas verifica si esa cookie ya existe. Si la cookie ya está configurada, omita la ventana emergente.

JSFiddle: https://jsfiddle.net/tx9w4apf/

Reemplace su javascript con el siguiente código:

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 + ";path=/";
}

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) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
$(function(){
var cookie = getCookie("agepopshown");
if(cookie ===1)
{
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});




$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
}
setCookie("agepopshown", 1,  365 );

});

function goBack() {
    window.history.go(-2);
}
0
user1412699 14 sep. 2018 a las 09:48

Recomendaría cookies para esto, pero también puede ir con:

LocalStorage o SessionStorage

Ambos son bastante iguales, pero difieren en cuanto tiempo se almacenarán en el navegador. Entonces puedes almacenar algo como esto:

sessionStorage.setItem("ageverified", "yes");

Para verificar el valor antes de mostrar la superposición, puede obtener el valor de esta manera:

var ageverified = sessionStorage.getItem("ageverified");

Por supuesto, la validación de su verificación de edad debe hacerse en el lado del servidor.

2
Stretau 14 sep. 2018 a las 09:43