1

Estoy en la creación de una ventana modal pero lo único que quiero es que la ventana solo se muestre al abrir la pagina, la pagina tiene diferentes funcionalidades que implica refrescarla pero cuando se refresca la pagina automáticamente la ventana se vuelve a mostrar.

$(document).ready(function () {
            $('#myModal').modal("show");
        })
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

Hay que tener en cuenta que no quiero deshabilitar que las paginas se refresquen lo que quiero es que la ventana modal se vuelve a mostrar cada vez que esta se refresque solo que se muestre por única vez

4
  • ya intentaste usando cookies? Commented el 22 oct. 2020 a las 22:23
  • @RuslanLópez No he usado cookies, es posible hacerlo ? Como ?
    – John Doe
    Commented el 22 oct. 2020 a las 22:24
  • es.stackoverflow.com/questions/177963/… Commented el 22 oct. 2020 a las 22:25
  • @RuslanLópez La pregunta no tiene una buena valoración y no se entiende muy bien
    – John Doe
    Commented el 22 oct. 2020 a las 22:26

3 respuestas 3

1

Agrega una comprobación con localStorage. Si la llave mostrarModal no existe entonces que se cree la llave y se muestre el modal. Si ya existe, el modal no se muestra.

$(document).ready(function () {
     // si no hay llave con nombre `mostrarModal`
     // crear la llave y mostrar el modal
     if(!window.localStorage.getItem("mostrarModal")){
           
        window.localStorage.setItem("mostrarModal","no");
               
        $('#myModal').modal("show");
      }
                
     })

Actualización

Para que la llave se elimine al cerrar el navegador se puede usar sessionStorage en lugar de localStorage

 $(document).ready(function () {
     // si no hay llave con nombre `mostraModal`
     // crear la llave y mostrar el modal
     if(!window.sessionStorage.getItem("mostrarModal")){
           
        window.sessionStorage.setItem("mostrarModal","no");
               
        $('#myModal').modal("show");
      }
                
     })
5
  • Esto no soluciono mi problema, se sigue mostrando la ventana modal después de refrescarse la pagina, adicional a lo que me comentas en la respuesta hay que agregar algo ?
    – John Doe
    Commented el 22 oct. 2020 a las 22:49
  • Cierto, estaba mal escrito el nombre de la llave. Ya lo corregí. Y no, no hay que agregar nada más, solo es esa validación.
    – Lobos
    Commented el 22 oct. 2020 a las 22:55
  • Funciona perfecto, pero estoy presentando un problema, es que la key queda viva al cerrar el navegador y abrir la ventana nuevamente, existe manera de que la key se elimine al cerrar el navegador ?
    – John Doe
    Commented el 22 oct. 2020 a las 23:07
  • Ya agregué una actualización a la respuesta.
    – Lobos
    Commented el 22 oct. 2020 a las 23:18
  • Excelente respuesta clara y concisa
    – John Doe
    Commented el 24 oct. 2020 a las 23:52
0

Utiliza sessionStorage para almacenar una variable para comparar si el modal a sido o no mostrado.

$(document).ready(function () {
 if(sessionStorage.getItem("mostrarModal")!=null){
    sessionStorage.setItem("mostrarModal",true);
    $('#myModal').modal("show");
 }});
0

Muchas gracias @Lobos, me sirvió tu respuesta. A continuación comparto la documentación que refuerza tu respuesta.

introducir la descripción de la imagen aquí

Fuente original pulse aquí!

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.