Animated Alert Banner In Vanilla JavaScript – Dismissible

Category: Javascript , Notification | July 17, 2020
Views Total:1,772 views
Official Page:Go to website
Last Update:July 17, 2020


Animated Alert Banner In Vanilla JavaScript – Dismissible


Dismissible is a simple plain JavaScript library that creates an animated top banner to inform users about error, info, or success messages on the web app.

How to use it:

1. Load the Dismissible’s JavaScript and CSS in the document.

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

2. Load the necessary LineIcons for the alert icons.

<link href="" rel="stylesheet" />

3. Create a container to hold the alert banner.

<div id="dismissible-container"></div>

4. Create a new Dismissible instance.

const dismissible = new Dismissible(document.querySelector('#dismissible-container'));

5. Create an ‘Info’ alert banner.'This is an informational alert!')

6. Create a ‘Success’ alert banner.

dismissible.success('Everything was okay!')

7. Create an ‘Error’ alert banner.

dismissible.error('Oops! Something went wrong...')

You Might Be Interested In:

Leave a Reply