css Bootstrap 4 snackbar吐司

Posted 2021-05-13

function showSnackbar(param) {
    var snackbarHTML = document.querySelectorAll(".snackbar"),
        element;
    for (element of snackbarHTML) {
        // Check if param is an Event or string
        if (param instanceof Event && param.currentTarget.hasAttribute("data-text")) {
            element.innerHTML = param.currentTarget.getAttribute("data-text");
        } else if (typeof param == "string" && !Utils.is_empty(param)) {
            element.innerHTML = param;
        }

        element.classList.add("snackbar-show");

        setTimeout(function() {
            element.classList.remove("snackbar-show");
        }, 3000);
    }
}
// Usos
// Opcion 1: Mostrara el texto dentro del HTML del snackbar
showSnackbar();
// Opcion 1: Mostrara el texto del atributo data-text del disparador
document.querySelector("#snackbar-trigger").addEventListener("click", showSnackbar);

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <!-- Muestra el snackbar con color "info" y
      un padding de 1rem en todos sus margenes (px y py) -->
      <!-- Color de fondo: https://getbootstrap.com/docs/4.1/utilities/colors/#background-color -->
      <!-- Padding: https://getbootstrap.com/docs/4.1/utilities/spacing/#how-it-works -->
      <div class="snackbar bg-info px-3 py-3">Texto a mostrar en el snackbar sin data-text</div>
      <button type="button" class="btn btn-primary btn-lg" id="snackbar-trigger" data-text="Texto en data-text">Snackbar trigger</button>
    </div>
  </div>
</div>

.snackbar {
    visibility: hidden;
    min-width: 100px;
    /* Dividimos el min-width por 2 para el 
    centrar el elemento */
    margin-left: -50px; 
    border-radius: 5px;
    position: fixed;
    z-index: 10;
    /* Centramos la snackbar en la pantalla */
    top: 10%;
    right: 1%;
}

.snackbar-show {
    visibility: visible;

/* Animacion: fade in y out de 0.5s de duracion.
En el fade out hay un retraso de 2.5 segundos */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animaciones para hacer fade in y out.
Puedes usar jQuery si te sientes mas comodo
y asi eliminas  las animaciones*/
@-webkit-keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeout {
    from {opacity: 1;}
    to {opacity: 0;}
}