Home Animation Plugins Simple Library for Making Custom Browser Alerts Using JavaScript

Simple Library for Making Custom Browser Alerts Using JavaScript

Animation Plugins webcodeflow · June 15, 2022 · Comments off

JSAlert is a small library for setting custom alerts with animations used by the Animate.CSS library.

css alert animation, notification animation css, css alert message, notification bell icon animation css, html notification popup, notification css bootstrap

How to make use of it:

1. Load the javascript and main stylesheet of JSAlert into your document.

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

2. Create an item to set notification alerts.

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

3. Create a toggle to display notification alerts. All configuration options can be passed through 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>

css3 animated alert notifications, JSAlert Plugin/Github, customize javascript alert box css