0

Buscando por StackOverflow encontré esta respuesta que muestra un modal de Bootstrap 5 al cargar la página sin usar Jquery, sin embargo se muestra cada que se hace refresca la página, y quisiera saber cómo hacer solamente salga 1 vez.

var myModal = document.getElementById('staticBackdrop');
var modal = bootstrap.Modal.getOrCreateInstance(myModal)
modal.show()
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog" id="waitDialog">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                   Some Stuff. 
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Understood</button>
                </div>
            </div>
            </div>
        </div>  

Me parece que es con LocalStorage, porque así aparece en esta respuesta. Sin embargo la respuesta está usando JQuery y no logré adaptarla al código actual.

3
  • Buenas, me temo que lo que quieres hacer no se puede sin usar jquery ya que cómo sabe el componente cuando se tiene que mostrar u ocultar sin ningún tipo de lógica. Ten en cuenta el html es un lenguaje de marcas sin ningún tipo de lógica alguna. Deberías usar cookies o la memoria caché y utlizar jquery para ello
    – rubenchus
    Commented el 26 may. 2022 a las 18:56
  • por lo que veo en la respuesta del enlace solo tienes que buscar el equivalente de $(document).ready de jquery en vanilla js eso es todo para que te funcione sin jquery Commented el 26 may. 2022 a las 19:16
  • Puedes hacer una logica externa, y usar por ejemplo SessionStorage para eso, para eso debes setear una variable visita=1 por ejemplo, de ahi si recarga la pagina y encuentra ese value en el local ya no ejecutas el modal.
    – Artes
    Commented el 26 may. 2022 a las 19:19

2 respuestas 2

3

Te dejo un ejemplo de como hacer tu codigo con un SessionStorage, espero te sirva.

const myModal = new bootstrap.Modal(document.getElementById('exampleModal')),
      btnCerrrar = document.getElementById('boton-cerrar');

window.addEventListener('load', ()=>{

  let visita = sessionStorage.getItem('visita');

  if(visita == null) myModal.show();

});

btnCerrrar.addEventListener('click', ()=>{
  myModal.hide();
  sessionStorage.setItem('visita', 1);

});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
      crossorigin="anonymous"
    />
  </head>
  <body>
  
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button id="boton-cerrar" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
    <script src="script.js"></script>

</body>
</html>

En este caso agrego tambien el EventListener del boton que cierra el modal, con esto aseguras que el usuario añada el SessionStorage y que el modal no se dispare cargando la pagina de nuevo

1
  • Muchísimas gracias! Funciona perfecto! Commented el 28 may. 2022 a las 12:54
1

siguiendo la respuesta del enlace sin jQuery quedaría asi

   <html>
     <head>
     <script type="text/javascript">
var modal = new bootstrap.Modal(document.getElementById("myModal"), {});
      function window_onload() {
       if (sessionStorage.getItem('myModal') !== 'true') {
        modal.show();
        sessionStorage.setItem('myModal','true');     
       }
      }
     </script>

  </head>
  <body onLoad="window_onload()">

  </body>
  </html>

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.