Easy & Sleek Alert Notifications With UIWebAlerts

Preview:

Description:

UIWebAlerts is a super lightweight JavaScript library that adds slick alert notifications to your website.

It comes with four built-in notification types: success, info, warning, and error. Each type has a distinct visual style to clearly communicate the message. You can even add custom icons to further personalize the alerts.

How to use it:

1. Download the package and load the following files in the document.

<link rel="stylesheet" href="ui-webalerts.css">
<script src="ui-webalerts.js"></script>

2. Initialize the UIWebAlerts.

const webalerts = new UIWebAlerts();

3. Set the path to notification icons.

webalerts.setIconPath("./res/");

4. Call the createAlert() method and pass in the type of alert you want, along with the message you want to display.

webalerts.createAlert("success", "Sccess alert");
webalerts.createAlert("info", "Info alert");
webalerts.createAlert("warning", "Warning alert");
webalerts.createAlert("error", "Error alert");

5. By default, the alerts will automatically dismiss themselves after 5 seconds, but you can override this duration when you call the createAlert() method by passing in a third parameter.

webalerts.createAlert("success", "Sccess alert", 3000);
webalerts.createAlert("info", "Info alert", 1000);
webalerts.createAlert("warning", "Warning alert", 2000);
webalerts.createAlert("error", "Error alert", 2500);