JavaScript/CSS/HTML || Notice.js – Simple Notification Message With Success, Warning & Error Icons Using Vanilla JavaScript

Print Friendly, PDF & Email

The following is a module with functions that demonstrates how to display a simple notification message with success, warning & error icons.

Using vanilla JavaScript, the message fades in and is displayed to the page, and fades out after a delay (in milliseconds). It’s look and feel can also be adjusted via CSS.

Notice.js & CSS Source

Contents

1. Basic Usage
2. Notice HTML
3. Notice.js & CSS Source
4. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates the JavaScript used to show the notification message. The message fades away after a specified amount of time (in milliseconds).

Sample:

Sample


2. Notice HTML

If you wish to show the messages without using JavaScript, the following is an example of the HTML used to display the notices.

Sample:

Sample

Sample:

Sample

Sample:

Sample


3. Notice.js & CSS Source

The following is the Notice.js Namespace & CSS Source. Include this in your project to start using!

The following is Notice.css.


4. More Examples

Below are more examples demonstrating the use of ‘Notice.js‘. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Leave a Reply