o prueba asi algo mucho mas sencillo, claro esto si quieres mas funcionalidad usa una libreria:
todo va en el mimo index.php:
Código PHP:
Ver original//verificamos si la cookie existe
if($_COOKIE['display']) {//si existe no hacemos nada
} else{
//si no existe la creaos y mostramos el div modal
}
Código CSS:
Ver original/*creamos la opcion de que los contenidos se adapten al alto de la pantalla*/
html, body{
height:100%;
}
/*cerramos los margenes del body*/
body{
margin:0px;
}
/*estilos para el modal*/
.top{
height:100%;
width:100%;
color:#fff;
z-index:1001;
position:relative;
background-color:rgba(0,0,0,0.80);
}
/*resto del contenido que esta detras del modal*/
.contenido{
display:block;
position:absolute;
}
/*anuncio central del modal el que tendra el boton de cierre*/
.boton{
top:40%;
left:40%;
display:block;
position:absolute;
width:300px;
height:150px;
background-color:#fff;
color:rgba(0,0,0,1.00);
border-radius:25px;
}
Código Javascript
:
Ver original/*aqui actualizamos el estilo del modal al cerrarlo y que se mantenga asi*/
function visible(){
document.getElementById("top").style.display = 'none';
/*aqui actualizamos la cookie temporal que mantendra cerrado el modal durante la navegacion del usuario*/
document.cookie = "display=none";
}
Código HTML:
Ver originalESTE ES EL CONTENIDO
<div class="top" id="top" style="display:<?php echo $_COOKIE['display']; ?>">
<center>ESTE ES EL MODAL </center>
<center><input type="button" onClick="visible()" value="Cerrar"/></center>