Beautiful Alert Notification In JavaScript And CSS – Alerts-JS

Category: Javascript , Notification | September 7, 2018
Author:botyk
Views Total:5,293 views
Official Page:Go to website
Last Update:September 7, 2018
License:MIT

Preview:

Beautiful Alert Notification In JavaScript And CSS – Alerts-JS

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>

You Might Be Interested In:


Leave a Reply