Simple and Easy jQuery Notification Plugin - NotifIt

NotifIt is a simple and fast jQuery plugin used to create various types of notification & alert windows with subtle sliding effects on the web page.

Basic Usage:

1. Load the latest version of jQuery javascript library from google CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Load the jQuery notifIt plugin's stylesheet and script files on the page.

<script type="text/javascript" src="js/notifIt.js"></script>
<link rel="stylesheet" type="text/css" href="css/notifIt.css">

3. Optionally you can create a button to toggle a notification & alert window.

<button onclick="not()">Click me</button>

4. The javascirpt.

<script>
function not1(){
notif({
msg: "<b>Success:</b> In 5 seconds i'll be gone",
type: "success"
});
}
</script>

5. Available options.

function not(){
notif({

// success, error, warning, info
type: "info",

// Default size
width = 400,
height = 60,

// Default position
position = "right", // left, center, right, bottom

// Default autohide
autohide = true,

// Default msg
msg = "",

// Default opacity (Only Chrome, Firefox and Safari)
opacity = 1,

multiline: 0,
fade: 0,
bgcolor: "",
color: "",
timeout: 5000,

// The z-index of the notification
zindex: null,

// The offset in pixels from the edge of the screen
offset: 0,

// Callback
callback: null,

clickable: false,

clickable: false,
animation: 'slide'

});
}

6. Default options for notif_confirm() method.

var myCallback = function(choice){
    if(choice){
        notif({
            'type': 'success',
            'msg': 'Yeah!',
            'position': 'center'
        })
    }else{
        notif({
            'type': 'error',
            'msg': ':(',
            'position': 'center'
        })
    }
}

notif_confirm({
    'textaccept': 'Let\'s go!',
    'textcancel': 'I\'ll think about it',
    'message': 'Shall we?',
    'callback': myCallback,
    'fulllscreen': false
})

7. Default options for notif_prompt() method.

notif_prompt{
  'message': 'Tell me something',
  'default_value': '',
  'textaccept': 'Accept',
  'textcancel': 'Cancel',
  'fullscreen': false,
  'callback': null
})

Changelog:

2018-10-08

• Fixed inner `p` custom color

2016-11-28

• Notifit Prompt & bugfixes

2016-08-29

• Fixed jQuery conflict in notif_dismiss

2016-07-29

• [Fix] notif_confirm()

2016-04-12

• Fixed timeouts, new option 'fullscreen' to notif_confirm

2015-11-25

• Added missing style for close button when `clickable: true`

2015-11-18

• Fixed `clearTimeout` on `destroy`

2015-11-17

• CSS update.

2015-09-09

• JS update.

2015-09-01

• Animation support

2015-06-25

• Changed 'clearInterval' to 'clearTimeout'

2015-06-17

• Refactored

2015-05-12

• Corrected classes namespace

2015-03-13

• add AMD support

2015-03-10

• Stop event propagation.

2014-12-17

• Added callback support
• Now you can add an element (in the msg) with id 'notifIt_close' for click to close

2014-11-02

• Fixed: z-index issue as the popup was not appearing properly

2014-10-24

• added the ability to have the notification appear at the bottom center. This is done by setting the position to "bottom".  Could be useful to do some more work to allow bottom right/bottom left in future.

2014-05-17

• Make the center position compatible with IE8

2014-04-02

• Fixed width: "all" bug

---

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