Author: | oscarcweb |
---|---|
Views Total: | 389 views |
Official Page: | Go to website |
Last Update: | May 18, 2022 |
License: | MIT |
Preview:

Description:
A vanilla JavaScript library that helps you create snazzy-looking alert notifications using HTML, CSS, and JavaScript.
Lightweight (gzip/min ~1kb!), dependency-free, and was built to meet the following requirements:
- Various types of notifications: Info, Warning, Danger
- Auto dismisses just like a toast.
- Custom alert title and message.
- Supports any content type.
- Delay the display of the alert notification.
How to use it:
1. Load the JavaScript CustomAlerts.min.js
and Stylesheet CustomAlerts.min.css
.
<link href="src/CustomAlerts.min.css" rel="stylesheet" /> <script src="src/CustomAlerts.min.js"></script>
2. Initialize the Custom Alerts.
let alerts = new CustomAlerts({ // options here }); 3. Display a default alert notification on the screen.
alerts.alert({ title: 'Default Alert', content: 'Hello World!', })
4. Set the type of the alert: ‘info’, ‘warning’, or ‘danger’.
alerts.alert({ type: 'info', title: 'Info Alert', content: 'Hello World!', }) alerts.alert({ type: 'warning', title: 'Warning Alert', content: 'Hello World!', }) alerts.alert({ type: 'danger', title: 'Danger Alert', content: '<b>HTML CONTENT</b>!', })
5. Create a toast-like alert notification.
alerts.alert({ title: 'Default Alert', content: 'Hello World!', autoclose: 5000, })
6. Delay the display of the alert notification.
alerts.alert({ title: 'Default Alert', content: 'Hello World!', delay: 5000, })