Juan M. Barrós Pazos: Ventana aviso politica de cookies

Hola a todos, vamos a ver como hacer esa ventanita de aviso de las cookies, que la legislación vigente en la Unión Europea nos obliga a colocar en nuestra web.
Os dejo el código completo, un archivo css y un html, para que lo podáis integrar y modificar en vuestra web a vuestro gusto.
La venta de aviso resultante será esta:

* Primero el Css:

body {
    margin: 0;
    padding: 0;
    background-color: #333;
}

#barraaceptacion {
    display:none;
    position:fixed;
    left:0px;
    right:0px;
    bottom:0px;
    padding-bottom:20px;
    width:100%;
    text-align:center;
    min-height:40px;
    background-color: rgba(0, 0, 0, 0.5);
    color:#fff;
    z-index:99999;
}

.inner {
    width:100%;
    position:absolute;
    padding-left:5px;
    font-family:verdana;
    font-size:12px;
    top:30%;
}

.inner a.ok {padding:4px;color:#00ff2e;text-decoration:none;}
.inner a.info {padding-left:5px;text-decoration:none;color:#faff00;}

* Segundo el html:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Código de ejemplo | Política de Cookies</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link href="cookies.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="barraaceptacion">
    <div class="inner">
        Solicitamos su permiso para obtener datos estadísticos de su navegación en esta web, en cumplimiento del Real Decreto-ley 13/2012. Si continúa navegando consideramos que acepta el uso de cookies.
        <a href="javascript:void(0);" class="ok" onclick="PonerCookie();"><b>OK</b></a> |
        <a href="#" target="_blank" class="info">Más información</a>
    </div>
</div>

<script>
function getCookie(c_name){
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1){
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1){
        c_value = null;
    }else{
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1){
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start,c_end));
    }
    return c_value;
}

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;
}

if(getCookie('tiendaaviso')!="1"){
    document.getElementById("barraaceptacion").style.display="block";
}
function PonerCookie(){
    setCookie('tiendaaviso','1',365);
    document.getElementById("barraaceptacion").style.display="none";
}
</script>

</body>
</html>

En fin, así de fácil, nos vemos.

Juan M. Barrós Pazos

viernes, 26 de mayo de 2017

Ventana aviso politica de cookies

No hay comentarios:

Publicar un comentario