CSS3 Animated Alert Notifications – JSAlert

Preview:

Description:

JSAlert is a vanilla JavaScript library to help create customizable alert notifications with CSS3 animations powered by Animate.css.

How to use it:

Load the JSAlert’s main JavaScript and Stylesheet in your document.

<link rel="stylesheet" href="css/main.css">
<script src="js/main.min.js"></script>

Create an element to place the notification alerts.

<div id="alertBtns">
  
</div>

Create a toggle button to display the notification alerts. All the configuration options can be passed via HTML data attributes.

<button 
  data-animate-start="bounceInRight" 
  data-animate-end="bounceOutRight"
  data-text-color="white"
  data-bg-color="#00bcd4"
  data-placement="right"
  data-content="Top Right Alert"
  onclick="makeAlert(this)" 
  class="wf-alert-btn">
  Click Me
</button>