Minimal Flat Notification Plugin with jQuery - Notiser

File Size: 7.1 KB
Views Total: 806
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal Flat Notification Plugin with jQuery - Notiser

Notiser is a lightweight jQuery plugin that displays clean, flat notification messages and alerts for your end users. By default, the notification will auto dismiss after 3 seconds. You can also close a specified notification message manually by clicking on it.

How to use it:

1. Download and include the jQuery notiser plugin at the bottom of the webpage.

<script src="//"></script>
<script src="scripts/Notiser.js"></script>

2. Create an empty container to place the notifications.

<div class="test-notify" 
     style="width: 200px; 
            position: absolute; 
            right: 50px;"

3. Create a basic notification message displaying in the container you just created.

var notify = $N('Basic nofitication');'.test-notify');

4. Create custom notification messages.

notify.setText('This is warning!').setStyle('warning').show('.test-notify');
notify.setText('this is success!').setStyle('success').setAge(6000).show('.test-notify');

5. Apply your own CSS styles to the notifications.

.notiser {
  width: 100%;
  border-radius: 3px;
  text-align: center;
  color: white;
  padding: 15px 15px;
  font-size: 14px;
  margin-bottom: 10px;
  cursor: pointer;

.notiser.success { background-color: #31B893; }

.notiser.warning { background-color: #D66882; }

.notiser.basic { background-color: #d0d3d3; }

Change log:


  • Added Fullwidth notification
  • Demo page update

This awesome jQuery plugin is developed by pspfolio. For more Advanced Usages, please check the demo page or visit the official website.