En este ejemplo tengo un código que tiene la siguiente función: en el momento de cargar la pagina (después de 3 segundos) carga un modal que tiene una imagen para mostrar
Sin embargo quiero que ese modal se almacene en la cookie hasta un determinado tiempo (1 mes por ejemplo) y después se elimine automáticamente, para que así ya no me aparezca cada vez que actualizo la pagina. hasta el momento solo llama el modal. por favor espero contar con alguna solución.
function checkCookie(cname) {
setTimeout(function (){document.getElementById("modalImg").style.display="block"; }, 3000);
var year = 1000*60*60*24*365;
var expires = new Date((new Date()).valueOf() + year);
document.cookie = "cname" + expires.toUTCString();
}
.modalImg {
display: none;/* Domyślnie schowany */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.8);
}
.modalImg-content {
background: var(--white);
/* background-color: #fefefe; */
/* box-shadow: 2px 2px 10px silver; */
margin: 50px auto;
/* padding: 20px; */
/* border: 1px solid silver; */
border-radius: 10px;
text-align: center;
width: 35%;
height: 800px;
}
.modalImg-content img{
max-width: 100%;
max-height: 100%;
padding: 0 0 0 0;
position: relative;
}
@media screen and (max-width:375px){
.modalImg-content{
padding-top: 10px;
width: 80%;
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body onload="checkCookie()">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus magni tem odio necessit Assumenda magnam nobis aperiam quod maiores.</p>
<!-- MODAL IMG -->
<div class="modalImg" id="modalImg">
<div class="modalImg-content">
<span class="close">×</span>
<img src="https://images.unsplash.com/photo-1559657153-fdea6cd5ddf7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
</div>
</div>
<!-- FIN MODAL IMG -->
</body>
<script src="js.js"></script>
</html>
Gracias de antemano.