Beautiful Animated Popup Box Plugin - jQuery Alternative Alert

Alternative Alert is a beautiful, customizable, animated, and absolutely responsive replacement for native JavaScript's alert popup box.

Features:

• Based on Bootstrap 4's modal component.
• Uses Lottie.js library for smooth Render After Effects animations on icons.
• Success/Error/Warning alerts.
• Animated loading modal.
• Customizable confirmation dialog with promise support.

See Also:

• 10 Best Dialog Plugins To Replace The Native JS Popup Boxes

How to use it:

1. Load the necessary jQuery, Bootstrap, and Lottie.js in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/lottie.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Download and load the minified version of the Alternative Alert library.

<script src="js/alt-alert.min.js"></script>

3. Create alert boxes and define titles & messages as follows:

// basic
Alt.alternative({
 title:'Basic',
 text:'Basic Alert Box'
})

// success
Alt.alternative({
  status:'success',
  title:'Success',
  text:'Your Request is successfully fethced'
})

// warning
Alt.alternative({
  status:'warning',
  title:'Validation Errors!',
  text:'Username field is required!, Email field is required!'
})

// error
Alt.alternative({
  status:'error',
  title:'Server Errors!',
  text:'Your request failed on server'
})

4. Create a loading modal with an animated loading spinner.

Alt.alternative({
  status:'loading'
})

5. Create a confirmation dialog with confirm and cancel buttons.

Alt.alternative({
  status: 'question',
  showConfirmButton: true,
  showCancelButton: true,
  stop: true,
  title: 'Are You Sure?',
  text: 'Your data will be lost!'
})

6. Handle the confirmation dialog using ES6 Promises.

Alt.alternative({
  status: 'question',
  showConfirmButton: true,
  showCancelButton: true,
  stop: true,
  title: 'Are You Sure?',
  text: 'Your data will be lost!'
}).then((res) => {
  Alt.alternative({status:'loading'}
); res ? setTimeout(() => {
  Alt.alternative({status:'success'})},2000)  : null
})

7. Customize the confirm and cancel buttons.

Alt.alternative({
  status: 'question',
  showConfirmButton: true,
  showCancelButton: true,
  confirmButtonText:'I Know',
  cancelButtonText:'Back!',
  confirmButtonColor: '#15cf75',
  cancelButtonColor: '#e3391b',
  stop: true,
  title: 'Are You Sure?',
  text: 'Your data will be lost!'
})

Changelog:

2020-12-13

• Bugfixed

---

This awesome jQuery plugin is developed by aldyrifaldi. For more Advanced Usages, please check the demo page or visit the official website.