¡Hola de nuevo! Hoy vengo a compartir otro codekata para construir nuestro propio mensaje de cookies. Están teniendo bastantes visitas las páginas en JnjSite sobre este tema de las cookies. Y he recibido ya varias consultas a la web sobre este tema. Así que aquí estoy de nuevo compartiendo mi granito de arena en todo esto de la programación.
Se trata de un sencillo esqueleto de página web, con puro JavaScript, CSS y HTML. No se utiliza ni jQuery ni ningún elemento extra para que si has llegado aquí buscando algo de esto, lo puedas copiar y pegar a tu web, y adaptarlo a como quieras ?
Un poco de teoría
Para este mensaje de cookies se usan dos elementos principales: una caja que flota sobre toda la web, traslúcida y que evita que el usuario pueda hacer click en la web; y la propia caja del mensaje de cookies.
La historia para hacer la caja que evita que el usuario pueda seguir navegado es hacerla flotar encima de la web, ocupando toda la ventana. El mensaje de cookies tendrá que estar entonces encima de esta caja que oscurece la web, para que se pueda hacer click en el propio botón de aceptar las cookies.
Al grano, show me the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cookies-background {
position: fixed;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
top: 0px;
left: 0px;
z-index: 2;
}
.cookies-message {
position: fixed;
height: 70px;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
bottom: 0px;
left: 0px;
z-index: 3;
}
</style>
</head>
<body>
<h1>Testing boxes</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="btn-show-cookies-message">Show cookies message</button>
<button class="btn-show-cookies-background">Show cookies background</button>
<button class="btn-show-cookies-message-background">Show cookies message and background</button>
<div class="cookies-background"></div>
<div class="cookies-message">
Here is a cookies message bar
<button class="btn-close-cookies-message-background">Close</button>
</div>
<script>
// Close the cookies message and background..
document.querySelector('.btn-close-cookies-message-background').addEventListener('click', function () {
document.querySelector('.cookies-background').style.display = 'none';
document.querySelector('.cookies-message').style.display = 'none';
});
// Show the cookies message..
document.querySelector('.btn-show-cookies-message').addEventListener('click', function () {
document.querySelector('.cookies-message').style.display = 'block';
});
// Show the cookies background..
document.querySelector('.btn-show-cookies-background').addEventListener('click', function () {
document.querySelector('.cookies-background').style.display = 'block';
});
// Show the cookies message and background..
document.querySelector('.btn-show-cookies-message-background').addEventListener('click', function () {
document.querySelector('.cookies-background').style.display = 'block';
document.querySelector('.cookies-message').style.display = 'block';
});
</script>
</body>
</html>
