Alert con diseño

Hey hoy les vengo a compartir este snackAlert ó alert con diseño que e desarollado con HTML, CSS, y JS y la libreria de diseño de w3.css


JS

function snackAlert(msj,succes1info2warning3error4default5 = 1,time = 3000){


    var x = document.getElementById("snackbar");

    // Add the "show" class to DIV
    x.innerHTML = msj;
    x.className = "show snackbar"+succes1info2warning3error4default5;

    // After 3 seconds, remove the show class from DIV
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, time);

}
HTML el html lo agregan en caulquier parte de su codigo
<div class="snackbar"> </div>

<button onclick="snackAlert('Hola',1)">Snack Alert</button>

Tenemos varios tipos de alert
1 = success
2 = info
3 = warning
4 = error
5 = default


See the Pen SnackAlert by Robert Niño (@robert-nino) on CodePen.

Comentarios

Entradas populares de este blog

Hora Militar a Meridiano, Hora de 24H a 12H JavaScript

¿Laravel Cómo evitar el error de TokenMismatchException?