Customize suas notificações Javascript

Assim como já mostramos opções de customizar seus alertas aqui , você pode deixar ainda mais interesssante suas notificações com Toastr.

Para usá-lo, existem diversas maneiras, para isso, recomendo você consultar o site do projeto. Mas vamos mostrar um exemplo básico:

Adicione o CSS ao cabeçalho no seu documento HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

Se estiver usando Bootstrap, recomendo inserir essa linha após o CSS do Bootstrap.

Depois adicione o JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

Lembrando que ele utiliza a biblioteca jQuery, logo, é recomendado inserir após o jQuery.

Depois é só criar um exemplo para vê-lo funcionar:

<!DOCTYPE html>
<!--
vim: et ts=2 sw=2 ft=html:
-->
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Teste Toastr</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
      $(document).ready( function(){
        $('.my').click( function(){
          toastr.success("Tá funfandoo!");
        } );

      } );
    </script>

  </head>
  <body>
    <button class="my">Clique aqui para exibir a notificação</button>
  </body>
</html>

AVISO: Tive alguns problemas em fazer funcionar com versões recentes de jQuery , por isso usei a versão 1.9.1 como exibido acima, que funcionou de boa!

Existem outros tipos de mensagens tipo:

De cor vermelha(e com ícone de erro): toastr.error("Mensagem");
De cor amarela(e com ícone de aviso): toastr.warning("Mensagem");
De cor verde(e com ícone de ok): toastr.success("Mensagem");

Também é possível customizar o tempo de exibição entre outros, exemplo:

Insira isso no seu código JS

toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}