1

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">&times;</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.

1 respuesta 1

0

la funcion checkCookie solo muestra el popup y luego agrega la cookie. Faltaria agregar la parte en que lee la cookie y si existe no prende el modal. El tema que tambien estas usando la variable cname pero luego la imprimis como un String, yo te la escribo como string para que te funcione.

Podria ser algo asi:


function checkCookie( cname ) {

    if ( document.cookie.indexOf( "cname" ) > -1 ) {// Aca variable como string 
         return;
    }

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

Para que tengas un mejor funcionamiento te conviene separarlo en un archivo aparte y utilizar funciones de cookies mas completas por ejemplo:


// Creas un archivo que se llama ModalCookie.js
(function(){

    function setCookie(name,value,days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }
    function getCookie(){
        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 showModal(){
        // Si existe la cookie seMostroModal, no hacemos nada.
        if ( getCookie( 'seMostroModal' ) == 'true' ) {
            return;
        }

        //Esperamos 3 segundos
        setTimeout(function (){
            // Mostramos el Modal
            document.getElementById("modalImg").style.display="block";
            // Guardamos la cookie
            setCookie( 'seMostroModal', 'true', 30 );
        }, 3000); 
    }


    showModal();

})( window );

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.