Beautiful Alert Notification In JavaScript And CSS – Alerts-JS

Preview:

Description:

Alerts-JS is a minimal notification solution for the web that makes it easier to create different styles of notification alerts using CSS/CSS3.

JavaScript is only used to close the notifications with a fade-out animation.

How to use it:

Import the necessary JavaScript and CSS files into the html document.

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

The html to create alert notifications.

<div class="alert">
  <span class="alert-close" data-close="alert" title="Close">&times;</span>
  <strong>Default</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-red">
  <span class="alert-close" data-close="alert" title="Close">&times;</span>
  <strong>Red</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-pink">
  <span class="alert-close" data-close="alert" title="Close">&times;</span>
  <strong>Pink</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-purple">
  <span class="alert-close" data-close="alert" title="Close">&times;</span>
  <strong>Purple</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-indigo">
  <span class="alert-close" data-close="alert" title="Close">&times;</span>
  <strong>Indigo</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-blue">
  <span class="alert-close" data-close="alert" title="Close">&times;</span>
  <strong>Blue</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-cyan">
  <span class="alert-close" data-close="alert" title="Close">&times;</span>
  <strong>Cyan</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-teal">
  <span class="alert-close" data-close="alert" title="Close">&times;</span>
  <strong>Teal</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-green">
  <span class="alert-close" data-close="alert" title="Close">&times;</span>
  <strong>Green</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-orange">
  <span class="alert-close" data-close="alert" title="Close">&times;</span>
  <strong>Orange</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-brown">
  <span class="alert-close" data-close="alert" title="Close">&times;</span>
  <strong>Brown</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>
<div class="alert alert-bgray">
  <span class="alert-close" data-close="alert" title="Close">&times;</span>
  <strong>Blue gray</strong> - lorem Ipsum is simply dummy of the printing and typesetting industry.
</div>