Tiny & Customizable Notification Popup Library – Awesome Alert

Category: Javascript , Notification | September 30, 2022
Author:DutraGames
Views Total:2 views
Official Page:Go to website
Last Update:September 30, 2022
License:MIT

Preview:

Tiny & Customizable Notification Popup Library – Awesome Alert

Description:

Awesome-Alert is a customizable notification popup JavaScript library for creating beautiful-looking alerts/confirmation messages and toast notifications. Can be used with any type of website, on any device, and on any browser.

How to use it:

1. To get started, load the Awesome Alert’s files in the HTML.

<link rel="stylesheet" href="style.css" />
<script src="awesomeAlert.js"></script>

2. Create alert popups. Available alert types:

  • success (default)
  • info
  • warning
  • error
  • dark
awesomeAlert({
  type: 'success',
  title: 'Alert!',
  message: 'Alert Message!',
  img: 'imgs/TYPE.svg',
  buttonOK: 'Done!',
})

3. Create confirmation popups. Available confirmation types:

  • question
  • opition
awesomeAlert({
  type: 'question',
  title: 'Do you like cats?',
  message: 'Could you answer me?',
  img: 'imgs/question.svg',
  buttonConfirm: 'Yes',
  buttonCancel: 'No',
  closeStyle: 'circle'
})

4. Create a prompt popup.

awesomeAlert({
  type: 'input',
  title: 'What is your name?',
  placeholderInput: 'What is your name?',
  img: 'imgs/input.svg',
  buttonOK: 'Submit',
  closeStyle: 'circle'  
})

5. Create a custom popup.

awesomeAlert({
  type: 'custom',
  title: 'You can start?',
  message: 'The game is just catching the balls.',
  bgColor: '#23a5c8',
  img: 'imgs/custom.svg',
  buttonOK: 'GO!',
  closeStyle:  'circle'  
})

6. The library returns a Promise which can be used to trigger a function based on the user action.

awesomeAlert({
  type: 'success',
  title: 'Success!',
  message: 'Successful action!',
  img: 'imgs/success.svg',
  buttonOK: 'Done!',
}).then(a => alert(a))

7. Create toast-like notifications.

  • success
  • error
  • warning
  • info
  • dark
  • custom
awesomeToast({
  type: 'success',
  title: 'SUCCESS!',
  message: 'Action Success!',
  img: './imgs/success.svg',
  timer: 3000,
  position: 'right',
  bgColor: '#2dd284'
})

8. Create Horizontal (notification bar) notifications.

  • success
  • error
  • warning
  • info
  • dark
  • custom
awesomeHorizontal({
  type: 'success',
  title: 'SUCCESS!',
  message: 'Action Success!',
  img: './imgs/success.svg',
  bgColor: '#2dd284',
  buttonOK: 'OK!',
})

Changelog:

09/30/2022

  • Added Horizontal (notification bar) notification.

09/27/2022

  • Added Toast messages.

09/25/2022

  • Added Custom type

09/24/2022

  • Added prompt type

You Might Be Interested In:


Leave a Reply