Full-featured jQuery Notification Popup Plugin - popmessage

popmessage is a simple yet multifunctional jQuery plugin used to create growl-style notifications and/or full-width notification bars on the webpage. Licensed under the GPL v3.

Features:

• Auto dismiss.
• Can be closed manually.
• Can be placed anywhere on the webpage.
• Also allows to be placed inside a specific container.
• Fade in & fade out animations.
• Without writing any JavaScript.

How to use it:

1. Load the Font Awesome 4 if you want to display icons in the notification popups.

<link rel="stylesheet" href="font-awesome.min.css">

2. Load the CSS jquery.popmessage.css and JavaScript jquery.popmessage.js in the html page. Be sure that you first have jQuery library included.

<script src="//code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="jquery.popmessage.css">
<script src="jquery.popmessage.js">

3. Create the notification message as follow:

<div class="pop pop-success pop-top-left">
  <div class="pop-title">
    Success !
  </div>
  <div class="pop-body">
    This is success message !
  </div>
</div>

4. Specify the notification type using the following CSS classes.

• pop-success: success notification
• pop-danger: danger notification
• pop-warning: warning notification
• pop-info: information notification

5. Position the notifications using the following CSS classes.

• pop-top-left: top-left
• pop-top-right: top-right
• pop-bottom-left: bottom-left
• pop-bottom-right: bottom-right
• pop-top-wide: top + full width
• pop-bottom-wide: bottom + full width

6. Create a button to toggle the notifications.

<button data-trigger="pop" data-pop-class="pop-top-left">
  Show Top-Left Corner Pop
</button>

7. Global plugin settings.

// animation speed
fadeIn: 500,
fadeOut: 500,

// auto dismiss after 4 seconds
delay: 4000,

// is closable?
closable: true,

// where to display the notifications
container: undefined

---

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