2

Tengo este popup en mi index que aparece cada vez que se carga la pagina de inicio, dicho popup es para validar la edad de cada usuario, al ser mayor de 18 años se oculta para poder mostrar el contenido del index.

Pero quiero que solo se muestre una sola vez al cargar la web. Ya que se hace un poco tedioso que al estar navegando por las diferentes paginas aparezca cada vez que se entra a la pagina de inicio.

Popup

Este es el código de html

 <div class="pop-up">
    <div class="pop-up-wrap">
        <div class="pop-up-title">
            <h2>
              <img src="images/logoblanco.png"></h2>
            <p>Winemakers desde 1915.</p>
        </div>
        <div class="subcription">
            <div class="line"></div>
 
            <div class="sub-content">
                <h2>Por favor verifica tu edad</h2>
                <p style="color: black;">Para navegar en este sitio web debes tener la edad legal para beber en tu pais</p>

                  <div id="close">
                 <button  class="subs-send" type="submit" >Soy mayor de 18 años</button>
               </div>

                 <a href="https://www.google.com">
                 <button class="subs-send" type="submit" >No soy mayor de 18 años</button></a> 
            </div>
            
            <div class="line"></div>
        </div>
    </div>
</div>

Y este es el js

$(document).ready(function () {

function showPopup(){
    $('.pop-up').addClass('show');
    $('.pop-up-wrap').addClass('show');
}

$("#close").click(function(){
    $('.pop-up').removeClass('show');
    $('.pop-up-wrap').removeClass('show');
});

$(".btn-abrir").click(showPopup);

setTimeout(showPopup, 1000);

});

1
  • Podrias utilizar una cookie desde javascript con un tiempo de expiración definido o utilizar un localStorage para almacenar algún valor que te indique que ya se ha mostrado el popup Commented el 19 ago. 2021 a las 17:29

1 respuesta 1

1

Puedes usar sessionStorage (si quieres que la proxima sesion de navegacion vuelva a aparecer) o localStorage (si quieres que sea permanente en el navegador independiente si se inicia una nueva sesion) para almacenar un valor de tipo 'primera visita' y asi solo mostrarlo una vez:

if (!localStorage.getItem('first-time')){
  setTimeout(showPopup, 1000);
  localStorage.setItem('first-time',1);
}

También podria hacerse con una cookie, pero tendrias que implementar el guardado y la obtencion de la cookie codificada entre otros valores en document.cookie

1
  • me sirvió lo de localStorage graciass. Commented el 20 ago. 2021 a las 14:13

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.