Mostrar ventana modal automáticamente solo la 1ª vez abra la página

publicado por: Anonymous

Estoy trabajando un Modal sencillo con la libreria http://izimodal.marcelodolza.com// de Jquery, quiero hacer que el Modal que tengo solo se abra una vez en el DOM y auque refresque la página (F5) el modal ya no se muestre de nuevo en pantalla.

La idea que me surge es manejarlo por Cookies pero no tengo el suficiente conocimiento.

Agradesco cualquier aporte.

_x000D_

_x000D_

$(function () {_x000D_
    $("#modal").iziModal({_x000D_
        title: "Componentes de la Intranet",_x000D_
        subtitle: "Tiempos S.A.S",_x000D_
        transitionIn: 'fadeInDown',_x000D_
        headerColor: '#006979',_x000D_
        transitionOut: 'comingOut',_x000D_
        width: 800,_x000D_
        height: 1000_x000D_
    });_x000D_
});

_x000D_

<!DOCTYPE html>_x000D_
<html lang="es">_x000D_
_x000D_
<head>_x000D_
    <title>Document</title>_x000D_
    <meta charset="UTF-8">_x000D_
    <meta name="viewport" content="width=device-width, initial-scale=1.0">_x000D_
    <meta http-equiv="X-UA-Compatible" content="ie=edge">_x000D_
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.min.css">_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
    <a href="#" data-izimodal-open="#modal">Modal</a>_x000D_
_x000D_
_x000D_
    <div class="" id="modal" class="modal">_x000D_
        <h1>Hola Mundo</h1>_x000D_
    </div>_x000D_
_x000D_
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>_x000D_
    <script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.min.js"></script>_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

solución

En vez de enrollarte con una cookie más vale podrías almacenar un dato booleano en localStorage

localStorage.setItem("modalAbierto", false);

$(elemento).on("evento al abrir el modal", function(){
   localStorage.setItem("modalAbierto", true);
})

function abrirModal()
{
   if(!localStorage.getItem("modalAbierto"))
   {
       abrirModal()
   }
 } 
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *