Elegant Alert/Confirm/Toast Dialog Box In JavaScript – Cute Alert

Category: Javascript , Notification , Recommended | July 1, 2020
Author: gustavosmanc
Views Total: 437 views
Official Page: Go to website
Last Update: July 1, 2020
License: MIT

Preview:

Elegant Alert/Confirm/Toast Dialog Box In JavaScript – Cute Alert

Description:

Cute Alert is a Vanilla JavaScript dialog popup library to create alert notifications, confirm popup boxes, and toast messages on the web app.

How to use it:

1. To get started, load the Cute Alert’s files in the document.

<link rel="stylesheet" href="style.css" />
<script src="cute-alert.js"></script>

2. Create alert notification boxes and determine the notification type as follows:

Cute Alert Box

cuteAlert({
  type: "success",
  title: "Success Title",
  message: "Success Message",
  buttonText: "Okay"
})

cuteAlert({
  type: "error",
  title: "Error Title",
  message: "Error Message",
  buttonText: "Okay"
})

cuteAlert({
  type: "warning",
  title: "Warning Title",
  message: "Warning Message",
  buttonText: "Okay"
})

cuteAlert({
  type: "info",
  title: "Info Title",
  message: "Info Message",
  buttonText: "Okay"
}).then(() => {
  // do something
})

3. Create a confirm dialog.

Cute Alert Confirm Dialog

cuteAlert({
  type: "question",
  title: "Confirm Title",
  message: "Confirm Message",
  confirmText: "Okay",
  cancelText: "Cancel"
}).then((e)=>{
  if ( e == ("Thanks")){
} else {
    alert(":-(");
  }
})

4. Create a toast message and determine the timeout in ms.

Cute Alert Toast

cuteToast({
  type: "success", // or 'info', 'error', 'warning'
  message: "Toast Message",
  timer: 5000
})

Changelog:

07/01/2020

  • CSS Update

You Might Be Interested In:


Leave a Reply