1

Tengo un modal múltiple que se muestra apenas carga mi pagina de inicio, el modal guarda su estado donde se dejó por ultima vez si este se cierra. Por ejemplo, si me encuentro en el modal2 y lo cierro, al refrescar la pagina vuelve a mostrarme donde lo deje que sería el modal2. Hasta ahi todo funciona bien.

Lo que quiero es evitar que el modal se muestre cada vez que refresco la pagina o si por ejemplo estoy navegando en otro lugar de mi sitio web y al volver a la pagina de inicio vuelve a mostrarse el modal. No quiero que el modal se muestre a cada momento.

Por eso necesito ayuda, para lograr que el modal solo se muestre dos veces al día y me muestre donde deje el modal por ultima vez, cada 12 horas.

Este es mi código

<style>
  .modalDialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
  }
  .modalDialog:target {
  opacity: 1;
  pointer-events: auto;
  }
  .modalDialog>div {
  width: 500px;
  position: relative;
  margin: 10% auto;
  padding: 26px;
  border-radius: 2em;
  background: #fff;
  }
</style>
<div id="openModal1" class="modalDialog" data-modalorder="1">
 <div>
   <a href="#close" title="Close">X</a>
   <h1>Content modal 1</h1>
   <input type="button" onclick="start()" value="Inicio">
 </div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder="2">
  <div>
    <a href="#close" title="Close">X</a>
    <h1>Content modal 2</h1>
    <input type="button" onclick="btn_next()" value="Siguiente">
  </div>
</div>
<div id="openModal3" class="modalDialog" data-modalorder="3">
  <div>
    <a href="#close" title="Close">X</a>
    <h1>Content modal 3</h1>
    <input type="button" onclick="" value="Siguiente">
  </div>
</div>

<script>
  const openModal1 = () => {
   window.location.href = "#openModal1";
 }

  const openModal2 = () => {
    window.location.href = "#openModal2";
  }

  const openModal3 = () => {
    window.location.href = "#openModal3";
  }

  function start() {
    openModal2();
  }

  const btn_next = () => {
   openModal3();
  }

  const settingName = "page"; //nombre de la configuración que se almacenará en localStorage
  init();

  function init() {
    // escuchar el evento de cambio de hash
    window.addEventListener("hashchange", e => {
     //quitar #
      let page = location.hash.substring(1);
      if (page != "close")
        localStorage.setItem(settingName, page); //guardar el hash de la página actual

    });
    let page = localStorage.getItem(settingName);
    if (page)
      location.hash = "#" + page;
    else
      window.location.href = "#openModal1"; //default pagina

 }


</script>
1
  • Usa una cookie. O un dato de sesión. O algo en el localStorage. O consume una variable en base de datos.
    – Alfabravo
    el 5 may. 2023 a las 18:20

1 respuesta 1

1

Como te dijeron en el comentario, usa una cookie, si al entrar en la página o recargar la cookie no existe (porque es la primera vez que entras a la página o porque ya habías entrado antes pero la cookie ha expirado) se ejecuta el modal y se crea la cookie... si al cerrar y volver a entrar en la página esa cookie existe, el modal no se ejecutara... una vez que la cookie haya expirado (pasadas 12 horas, en este ejemplo solo puse 15 segundos de expiración) se volverá a mostrar el modal en la parte donde lo dejaste la última vez:

const openModal1 = () => window.location.href = "#openModal1";
const openModal2 = () => window.location.href = "#openModal2";
const openModal3 = () => window.location.href = "#openModal3";
const start = () => openModal2() 
const btn_next = () => openModal3()

function crearCookie(){
  const expirationDate = new Date(Date.now() + 15000); // esta fecha de expiracion es de 15 segundos desde la creacion de la cookie, para que puedas comprobar.
  //  para que dure 12 horas deberias declarar la variable tal que asi:
  // const expirationDate = new Date(new Date().getTime() + 12 * 60 * 60 * 1000)
  document.cookie = 'modalactive=false; expires=' + expirationDate.toUTCString() + '; path=/'
}

function existeLaCookie(){
  let cookie = document.cookie.includes('modalactive=false')
  if(cookie) return true
  else return false
}

const settingName = "page"; 

if(!existeLaCookie()) { // si no existe la cookie:
  init() // ejecutamos la funcion init()
  crearCookie(); // inmediatamente creamos una cookie
} else location.hash = 'close' // si existe seteamos el hash de la pagina a 'close'

function init() {
  windowlistener = window.addEventListener("hashchange", (e) => {
    let page = location.hash.substring(1);
    if (page != "close") localStorage.setItem(settingName, page);
  });
  let page = localStorage.getItem(settingName);
  if (page) location.hash = "#" + page;
  else window.location.href = "#openModal1"; 
}
2
  • Gracias, esta es una buena solución. Me funcionó
    – Coc L
    el 5 may. 2023 a las 19:02
  • @CocL si te sirvió márcala como útil, saludos el 5 may. 2023 a las 19:06

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.