Custom Alert Notification & Confirmation Dialog JS Library – OzoneAlerts.js

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',
};