2

Estoy tratando que al abrir el modal se muestre con javascript Mensaje1 por unos 4 segundos y que luego (Mensaje1) desaparezca, quedando solamente Mensaje2. Estoy usando Bootstrap 5.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Prueba</title>
         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    </head>
    <body>
        <div class="modal fade" id="demo" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    
                    <div class="text-center text-danger fw-bold" id="mensaje">Mensaje1</div>
                    <div class="text-center text-primary">Mensaje2</div>

                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

        <!-- Show modal -->
        <script>
            var myModal = new bootstrap.Modal(document.getElementById('demo'), {})
            myModal.toggle()
        </script>
        
        <!-- Mostrar Mensaje por tiempo -->
        <script type="text/javascript">
            $(document).ready(function() {
                setTimeout(function() {
                $('mensaje').fadeOut(1500);
            },400);
        });
        </script>
    </body>
</html>

Traté quitando el id del div de Mensaje1 pero tampoco funciona.

EDITADO: En el ejemplo publicado dejé por error el código en jQuery, pero ahora al utilizar bootstrap 5 ya no debería utilizarse jQuery sino javascript puro.

Encontré el siguiente código que he reducido y que oculta y muestra un texto al hacer click en un botón. ¿Cómo puedo hacer eso en el código de mi modal pero que automáticamente oculte Mensaje1?

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <button onclick="myFunction()">Try it</button>

  <div id="myDIV">
    This is my DIV element.
  </div>

  <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>

</body>
</html>
1
  • No está demás recordar que para Bootstrap 5 es prácticamente innecesario usar jQuery. O una de dos: o incluís jQuery en tu código (ya que lo de mostrar el mensaje por tiempo está en jQuery), o convertís tal fragmento de código a JS.
    – padaleiana
    Commented el 13 ago. a las 11:20

2 respuestas 2

1

Una animacón css puede servir, en el ejemplo hay 3 variaciones:

  • la primera se aplica agregandole una clase via javascript ( sin jQuery )
  • la otra ya trae la class en el html. Es la misma animación pero mas rápida; si la página tarda en cargar te la perdes.
  • la tercera es una variación de la primera, pero se activa a partir de que el modal se muestra ( enganchando al event shown.bs.modal)

.ocultar {
  opacity: 1;
  animation: ocultarAnimado 5s forwards;
}

@keyframes ocultarAnimado {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    /* display: none; */
  }
}

.ocultar.rapido {
  opacity: 1;
  animation: ocultarAnimado 0.75s forwards;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Prueba</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="modal fade" id="demo" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="text-center text-danger fw-bold" id="mensaje">Mensaje1 ocultar on load + 4s</div>
        <div class="text-center text-warning fw-bold" id="ocultarAlAbrir">ocultar 4s luego de abrir el modal</div>

        <div class="text-center text-primary">Mensaje2</div>
        <div class="text-center text-secondary text-small fw-thin ocultar rapido">Pestañeaste</div>

      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

  <!-- Show modal -->
  <script>
    const modalDemo = document.getElementById('demo')
    var myModal = new bootstrap.Modal(modalDemo, {})
    myModal.toggle()

    /* agregar la clase ocultadora a abrir el modal */
    modalDemo.addEventListener('shown.bs.modal', function() {
      const mensaje = document.getElementById('ocultarAlAbrir');
      mensaje.classList.add('ocultar');

    })
  </script>

  <!-- Ocultar Mensaje por css onLoad -->
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {

      const mensaje = document.getElementById('mensaje');
      mensaje.classList.add('ocultar');

    });
  </script>
</body>

</html>

2
  • Interesante solución.
    – Puntay
    Commented el 13 ago. a las 19:54
  • agregado una opción para que la clase "ocultadora" se agregue sólo cuando se abre el modal Commented el 13 ago. a las 20:08
0

Ya lo vi con mas detalle y estabas muy cerca de lograrlo, te falto incluir jquery y la referencia a el id con el signo #mensaje y listo

 <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Prueba</title>
             <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        </head>
        <body>
            <div class="modal fade" id="demo" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        
                        <div class="text-center text-danger fw-bold" id="mensaje">Mensaje1</div>
                        <div class="text-center text-primary">Mensaje2</div>
    
                    </div>
                </div>
            </div>
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
            <script
      src="https://code.jquery.com/jquery-3.7.1.js"
      integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
      crossorigin="anonymous"></script>
    
            <!-- Show modal -->
            <script>
                var myModal = new bootstrap.Modal(document.getElementById('demo'), {})
                myModal.toggle()
            </script>
            
            <!-- Mostrar Mensaje por tiempo -->
            <script type="text/javascript">
                $(document).ready(function() {
                    setTimeout(function() {
                    $('#mensaje').fadeOut(1500);
                },400);
            });
            </script>
        </body>
    </html>

1
  • Si, olvidé comentar que no se debe utilizar jQuery. He editado la pregunta.
    – Puntay
    Commented el 13 ago. a las 19:52

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.