Tiny & Customizable Notification Popup Library – Awesome Alert

Preview:

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!',
})

9. Determine whether to show the header. Default: true.

awesomeAlert({
  type: 'success',
  title: 'Success!',
  header: false,
}).then(a => alert(a))

10. Play a sound when a notification is triggered.

awesomeAlert({
  type: 'success',
  title: 'Success!',
  playSound: '/path/to/sound',
}).then(a => alert(a))

Changelog:

10/26/2022

• Update JS

10/21/2022

• fix buttons opinion

10/18/2022

• added playSound param in all functions

10/17/2022

• Added header prop to AlertHorizontal.

10/08/2022

• Added header prop.

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