Full-featured jQuery Notification Popup Plugin - popmessage

Full-featured jQuery Notification Popup Plugin - popmessage
File Size: 18.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.