Toastr

O Toastr é uma biblioteca leve e bem fácil de usar e que nos ajuda a criar notificações estilizadas aos usuários de maneira bem simples, com suporte para notificações de erros, mensagens de alertas e de informações ao usuário ou de operações bem sucedidas como por ex. “Cadastro Efetuado com Sucesso!”.

Por que usar?

Notificações elegantes e animadas.
Personalização com cores, posição e animações.
Fácil de integrar.

Exemplo de uso básico:

<!DOCTYPE html>

<html>

 <head>

<!-- 1º Importe o Css -->

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


 </head>
<!-- 2º Crie o Html -->

<body>

  <select id="toast-type" onchange="showToast(this.value)">
    <option value="success">Success</option>
    <option value="error">Error</option>
    <option value="warning">Warning</option>
    <option value="info">Info</option>
  </select>


<!-- 3º Importe o JQUERY -->


  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>



<!-- 4º Importe o Javascript -->


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



<!-- 5º Crie uma função que execute o toastr  -->
  <script>


    function showToast(toastType) {


      toastr[toastType]("i am " + toastType + " message")
    };
    showToast('warning');

  </script>
</body>

</html>


Visualização das notificações exibidas pelo Toastr.

Saiba mais e consulte a documentação oficial aqui.