Create Sleek Toast-Like Alert Notifications With Alerto.js

Preview:

Description:

Alerto.js is a super tiny JavaScript notification library for displaying toast-like success, error, warning, or informational alerts to the user.

You can customize the alert text, color, duration, and more. Queued alerts are displayed one after the other automatically. This avoids overwhelming users with too many messages at once.

How to use it:

1. Link the Alerto.js library to your webpage.

<!-- With Pre-defined Styles -->
<script src="withStyles/alerto.js"></script>
<!-- Without Styles -->
<script src="withoutStyles/alertoNoCSS.js"></script>

2. Utilize the function showAlert() to create an alert.

• text: Input the message you want to display.
• duration: Decide how long the alert stays on screen after its entrance animation.
• state: Choose from “primary”, “success”, “danger”, “warning”, or “info” to set the mood of your message.
• animation: Opt for a “fade-in-out” or “fade-up-out” visual entrance and exit.
• animationDuration: Define how long the entrance and exit animations last.
• position: Set the alert to appear at the “top” or “bottom”. By default, it’s set to “bottom”.

showAlert(text, duration, state, animation, animationDuration, position)

3. If you’ve opted for the version without predefined styles, don’t forget to add your own CSS to style the alerts.