es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Toast de 5 segundos de Bootstrap no se muestra.

12 Jul, 2023 Programación

Hola chicos, tengo un problema con el segundo toast que no se muestra.

HTML:

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<!-- FIRST -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
    <i class="fas fa-duck"></i>
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      ¿Ves? Así es.
    </div>
  </div>

<!-- SECOND -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
    <i class="fas fa-duck"></i>
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      ¿Ves? Así es.
    </div>
  </div>

</div>

El script se ve así:

<script>
    window.onload = (event) => {
     let myAlert = document.querySelector('.toast');
     let bsAlert = new  bootstrap.Toast(myAlert);
     bsAlert.show();
    }
</script>

Mi pregunta es, ¿cómo puedo arreglarlo para mostrar el segundo toast en mi sitio?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar el segundo mensaje emergente en tu sitio, necesitas modificar el script para seleccionar el segundo elemento del mensaje emergente. Puedes hacer esto utilizando el método querySelectorAll para seleccionar todos los elementos del mensaje emergente, y luego acceder al segundo elemento en el arreglo resultante utilizando el índice 1.

    Aquí está el script modificado:

    <script>
  window.onload = (event) => {
    let toastElements = document.querySelectorAll('.toast');
    let secondToast = toastElements[1];
    let bsAlert = new bootstrap.Toast(secondToast);
    bsAlert.show();
  }
</script>

    Esto debería seleccionar el segundo elemento del mensaje emergente y mostrarlo en tu sitio.

Comments are closed.