Hola, hoy necesité hacer uno de esos avisos que ocupan toda la página cuando entras a un sitio x y que te dice que debes aceptar una serie de normas para poder acceder y demás. Así que una vez hecho os lo dejo aquí por si a alguien le pudiera hacer falta. Tambien se puede utilziar para poner un anuncio a página completa o cualquier otro uso que le vean. Yo además de aviso de contenido x aproveché para ponerle el aviso de las cookies.
El resultado final adaptado para los colores de mi web queda así:
Aquí pueden ver un ejemplo funcionando, aunque no es en la página para el que lo hice ya que no se admiten páginas x en forobeta: InquimeroBlogs
Lo que es comprobar si existe una cookie, si no la hay (la primera visita de cada usuario) se mostrará el mensaje por encima de la web sin que afecte a su rendimiento (la web carga por debajo así que no afecta en nada). Si el usuario acepta se creará la cookie (con javascript, en este tutorial no utilizo nada de php), se eliminará el mensaje y no se le volverá a mostrar. Si aprieta el botón cancelar será redirigido a otro lugar.
Una vez explicado, vamos a ver el código.
Lo primero que tenemos que hacer es importar jquery, si no lo tenemos podemos hacerlo mediante el cdn
Crearemos un archivo .js que también importaremos después del jquery y que contendrá:
Como puedes ver aquí podrás especificar los días que quieres que esté la cookie, el contenido del mensaje...
En cuanto a la hoja de estilos, para mi web utilicé estos estilos:
Esto es todo, si tienen alguna duda pueden poner un mensaje.
Yo en un principio lo hice para crear el aviso de contenido, pero lo utilizaré en alguna otra página para un anuncio en grande antes de que se vea el contenido de la página.
Si les gustó, like!
El resultado final adaptado para los colores de mi web queda así:
Aquí pueden ver un ejemplo funcionando, aunque no es en la página para el que lo hice ya que no se admiten páginas x en forobeta: InquimeroBlogs
Lo que es comprobar si existe una cookie, si no la hay (la primera visita de cada usuario) se mostrará el mensaje por encima de la web sin que afecte a su rendimiento (la web carga por debajo así que no afecta en nada). Si el usuario acepta se creará la cookie (con javascript, en este tutorial no utilizo nada de php), se eliminará el mensaje y no se le volverá a mostrar. Si aprieta el botón cancelar será redirigido a otro lugar.
Una vez explicado, vamos a ver el código.
Lo primero que tenemos que hacer es importar jquery, si no lo tenemos podemos hacerlo mediante el cdn
Insertar CODE, HTML o PHP:
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>Crearemos un archivo .js que también importaremos después del jquery y que contendrá:
Insertar CODE, HTML o PHP:
$( document ).ready(function() {
function crearCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function leerCookie(name) {
var nameEQ = name + "=";
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,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eliminarCookie(nombre) {
crearCookie(nombre,"",-1);
}
if (leerCookie("aviso") == null) {
$( "body" ).append( "<div id='flotante' class='flotante'><br/><br/><br/><br/><br/><center><h3>AVISO DE CONTENIDO X</h3><br/><div class='textox'>Este sitio esta reservado a un publico mayor de edad y avisado, en conformidad con todas las reglamentaciones en vigor. Con un contenido de texto, fotos y videos clasificados como X, que pueden ser chocantes para ciertas sensibilidades.<br/><br/>Ademas, este sitio utiliza 'cookies' propias y de terceros para ofrecerte una mejor experiencia y servicio. Al navegar por este blog, aceptas el uso que hacemos de las 'cookies'. Sin embargo, puedes cambiar la configuracion de 'cookies' en cualquier momento. Lea nuestra politica de cookies: <a style='color:white' target='_blank' href='http://inquimero.com/cookies.html'>Politica de Cookies</a>. </div></center> <br/><center><button id='botonaceptar' class='verde'>Aceptar y entrar al sitio</button> - <button id='botoncancelar' class='azul'>Cancelar y salir del sitio</button></center></div>" );
}
$( "#botonaceptar" ).click(function() {
crearCookie("aviso",12,99999);
$( "#flotante" ).remove();
});
$( "#botoncancelar" ).click(function() {
//eliminarCookie("aviso");
window.location="http://google.es";
});
});Como puedes ver aquí podrás especificar los días que quieres que esté la cookie, el contenido del mensaje...
En cuanto a la hoja de estilos, para mi web utilicé estos estilos:
Insertar CODE, HTML o PHP:
.flotante{
background : #ebe9db url(http://1.bp.blogspot.com/-2yybWunTSWs/U8AOlL1jYyI/AAAAAAAAiP8/gU336FRhi4E/s1600/bg1.png) repeat;
position: absolute;
color:#fff;
top:0;
left: 10px;
border: 1px solid #CCC;
width:100%;
height:100%;
font-family : Verdana;
font-size : 80%;
line-height : 1.5;
}
.textox{
width:600px;
font-family : Verdana;
font-size : 100%;
}
button,
.button {
display : inline-block;
cursor : pointer;
border-style : solid;
border-width : 1px;
border-radius : 50px;
padding : 10px 18px;
box-shadow : 0 1px 4px rgba(0,0,0,.6);
font-size : 9.5pt;
font-weight : bold;
color : #fff;
text-shadow : 0 1px 3px rgba(0,0,0,.4);
font-family : sans-serif;
text-decoration : none;
}
.verde {
border-color: #8fc800;
background: #8fc800;
background: -moz-linear-gradient(top, #8fc800 0%, #438c00 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#8fc800), color-stop(100%,#438c00));
background: -webkit-linear-gradient(top, #8fc800 0%,#438c00 100%);
background: -o-linear-gradient(top, #8fc800 0%,#438c00 100%);
background: -ms-linear-gradient(top, #8fc800 0%,#438c00 100%);
background: linear-gradient(top, #8fc800 0%,#438c00 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#8fc800', endColorstr='#438c00',GradientType=0 );
}
.azul {
border-color : #2989d8;
background: #2989d8;
background: -moz-linear-gradient(top, #2989d8 0%, #1e5799 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#2989d8), color-stop(100%,#1e5799));
background: -webkit-linear-gradient(top, #2989d8 0%,#1e5799 100%);
background: -o-linear-gradient(top, #2989d8 0%,#1e5799 100%);
background: -ms-linear-gradient(top, #2989d8 0%,#1e5799 100%);
background: linear-gradient(top, #2989d8 0%,#1e5799 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#2989d8', endColorstr='#1e5799',GradientType=0 );
}Esto es todo, si tienen alguna duda pueden poner un mensaje.
Yo en un principio lo hice para crear el aviso de contenido, pero lo utilizaré en alguna otra página para un anuncio en grande antes de que se vea el contenido de la página.
Si les gustó, like!
