Lightweight Notification Dialog Popup Plugin - jQuery Notifier

File Size: 14.9 KB
Views Total: 1164
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight Notification Dialog Popup Plugin - jQuery Notifier

Notifier is a lightweight jQuery plugin for creating customizable dialog popups to show unobtrusive alert/confirmation messages in various styles.

How to use it:

1. Include the JavaScript file notifier.style.min.css before the closing body tag and the stylesheet notifier.script.js in the <head> section of your webpage.

<link href="notifier.style.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="notifier.script.js"></script>

2. Create a new dialog popup and pass the following parameters to the notifier function.

  • title: dialog title
  • message: dialog message
  • type: success, error, warning, notice and info
  • options: options arrary
// $.Notifier(title, message, type, options)
var notifier = $.Notifier("Dialog Title", "Message Here", "success", {
    // options here
});

3. Add custom action buttons to the dialog.

var notifier = $.Notifier("Dialog Title", "Message Here", "success", {
    btns:[
      {
        label:"ok",
        type:"success",
        onClick:function(){
          // do something
        }
      },
      {
        label:"cancel",
        type:"default",
        onClick:function(){
          // do something
        }
      }                        
  ],
});

4. More customization options with default values.

// $.Notifier(title, message, type, options)
var notifier = $.Notifier("Dialog Title", "Message Here", "success", {
    appendTo: "body",
    border_radius:6,
    rtl:false,
    vertical_align:"center",
    has_icon:true,
    btns:[
        {
            label:"ok",
            type:"default",
            onClick:$.noop
        },
    ],
    callback:$.noop
});

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