2

Tengo esta función que muestra un mensaje dependiendo del estado "error, success, warning, etc".... Y al agregar nueva alerta, esta se pone debajo así sucesivamente, lo que quiero hacer es invertirlo, o sea el último que sea el de arriba.

Ejemplo: En vez de:

  • Alerta 1
  • Alerta 2
  • Alerta 3

Quiero que sea:

  • Alerta 3
  • Alerta 2
  • Alerta 1

Código

alert: function({size = 24, libreria, icono, color, mensaje, segundos = 3}) {

    random = Math.floor(Math.random() * (1654 * 12)) + segundos; // Es solo para identificar el id

    this.createSvg({size, libreria, icono, bloqueHtml:'.Toast--icon'});
    id = `ToastBox_${random}`;
    html = $("#ToastBoxes").append(`<div id="${id}" class="Toast Toast--${color}"><span class="Toast--icon"></span><span class="Toast--text">${mensaje}</span></div>`).addClass('show');
    //ModalBox.cerrar();

    $('.Toast').each(function(index, value) {
      // Es 3s por defectos 
      setTimeout(function(){
         // ex: $("#ToastBox_15156").remove().fadeOut(350);
         $("#"+value.id).remove().fadeOut(this.setTime);
      }, segundos * 1000);
   });

   return html;
},

Desde ya muchas gracias, espero haberme expresado bien.

1 respuesta 1

3

Estas usando el método append() de jQuery el cual adiciona el elemento al final, solo cámbialo por prepend() y se incrustara al inicio, así:

html = $("#ToastBoxes").prepend(`<div id="${id}" class="Toast Toast--${color}"><span class="Toast--icon"></span><span class="Toast--text">${mensaje}</span></div>`).addClass('show');

Aquí esta su documentación

También tienes la opción de posicionarlo con Flexbox de CSS y usar la propiedad flex-direction, ejemplo, de la siguiente manera:

#ToastBoxes{
  display: flex;
  flex-direction: column-reverse;
}

Espero te sirva saludos

2
  • Gracias por responder y tu tiempo, me había olvidado de que existia .prepend() ya que nunca la había usado!
    – Miguel92
    Commented el 8 jul. 2021 a las 17:24
  • 1
    Con todo gusto..!! recuerda que como mencione Flexbox también te proporciona mucho dinamismo en este caso ;)
    – Josbert
    Commented el 8 jul. 2021 a las 17:29

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.