Hola chicos, tengo un problema con el segundo brindis 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"> See? Just like this. </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"> See? Just like this. </div> </div> </div>El guión parece
<script> window.onload = (event)=> { let myAlert = document.querySelector('.toast'); let bsAlert = new bootstrap.Toast(myAlert); bsAlert.show(); } </script>Mi pregunta es ¿cómo puedo solucionarlo para mostrar el segundo brindis en mi sitio?
show() solo funciona para un elemento, debe hacer un bucle para todos sus brindis si desea mostrarlos en un solo evento:
$.each($('.toast'),function(i,item){ new bootstrap.Toast(item).show();});Acabo de crear una clase llamada start-toast para todos los mensajes que se mostrarán cuando la página esté lista y luego apliqué el método toast() con el parámetro 'show' a todos los mensajes con esa clase personalizada. De acuerdo con la documentación , también debería poder apilarlos con la clase toast-container .
$(document).ready(function(){ $(".start-toast").toast('show'); }); <!-- JQuery - to handle with with the DOM easier !--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Bootstrap --> <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" rel="stylesheet"> <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'> <script crossorigin="anonymous" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <div class="position-fixed bottom-0 end-0 " style="z-index: 11"> <div aria-atomic="true" aria-live="assertive" class="toast hide start-toast" id="welcomeToast" role="alert"> <div class="toast-header"> <strong>🙂</strong> <strong class="me-auto">Welcome!!</strong> <small>0 min ago</small> <button aria-label="Close" class="btn-close" data-bs-dismiss="toast" type="button"></button> </div> <div class="toast-body"> How are you doing ? </div> </div> </div>