Author: | aleksanderkoder |
---|---|
Views Total: | 234 views |
Official Page: | Go to website |
Last Update: | July 27, 2022 |
License: | MIT |
Preview:

Description:
A pretty simple popup box library created to create customizable toast (info/error/success) notifications and confirmation dialog boxes on the page.
How to use it:
1. Load the OzoneAlerts.js in the document.
<link rel="stylesheet" href="OzoneAlerts.css" /> <script src="OzoneAlerts.js"></script>
2. Load the latest Font Awesome for the notification icons.
<link rel="stylesheet" href="/path/to/font-awesome/all.min.css" />
3. Create a toast-like alert notification.
// success Ozone.fire("success", "Hello, world!"); // info Ozone.fire("info", "Hello, world!"); // error Ozone.fire("error", "Hello, world!");
3. Customize the position of the popup box.
- “top-left”
- “top-middle”
- “top-right”
- “bottom-left”
- “bottom-middle”
- “bottom-right”
- “center”
Ozone.fire("success", "Hello, world!", "top-left");
5. Create a confirm dialog.
let options = { // options here }; Ozone.fire("success", "Are You Sure?", "bottom-left", "dialog", options, function () { // confirmed }, function () { // canceled }, );
6. Available options.
let options = { backgroundColor: "green", fontColor: "red", iconColor: 'black', borderRadius: '5px', border: '5px solid white', confirmButtonText: 'Hello, world!', cancelButtonText: 'Goodbye, world!', confirmButtonColor: 'green', cancelButtonColor: 'red', confirmButtonRadius: '5px', cancelButtonRadius: '15px', };