[LottieJS] Alternative Alert Library Using jQuery and Bootstrap 4

Alternate Alert is an alert library using Jquery, Lottie, and bootstrap 4. This plugin is a dynamic, and fully responsive alternative to the original JavaScript alert box.

jquery alert popup, jquery alert plugin, notification jquery bootstrap, toast notification jquery, jquery alert box, javascript alert library, custom confirm box in jquery

How to make use of it:

1. Load the mandatory jQuery, Bootstrap, and Lottie.js within the doc.

<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 model of the Alternative Alert library.

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

3. Create alert containers 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:'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 verifying 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 utilizing 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 verify 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!'
})

Beautiful Animated Popup Box Plugin, Alternative Alert Plugin/Github, jquery confirm