Smooth Animated Popup Message Box Plugin - wHumanMsg

Smooth Animated Popup Message Box Plugin - wHumanMsg
File Size: 58.9KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

wHumanMsg is a jQuery plugin for displaying humanized popup boxes with animation effects on your page to show the important messages, alerts, warnings, etc.

Basic Usage:

1. Include jQuery library and wHumanMsg.js on your page

<script type="text/javascript" src="./inc/jquery.1.8.2.min.js"></script>
<script type="text/javascript" src="wHumanMsg.js"></script>

2. Include wHumanMsg CSS to style your plugin

<link rel="Stylesheet" type="text/css" href="wHumanMsg.css" />

3.  Markup a popup window area and the add a button to toggle the Message Box

<div id="test"></div>
<input type="button" value="default" onclick="hm.wHumanMsg('YOUR CONTENT');">

4. Call the plugin

<script type="text/javascript">
	var hm = $("body").wHumanMsg();
	$.fn.wHumanMsg.defaultSettings.color = 'orange';
</script>

5. More Options

$('#ID').wHumanMsg({
    theme           : 'black',      // set theme (color)
    opacity         : 0.8,          // set background opacity
    fadeIn          : 1000,         // set fade in speed in milliseconds
    fadeOut         : 1000,         // set fade out speed in milliseconds
    displayLength   : 5000,         // set length of time message will stay before fadeOut in milliseconds
    html            : true,         // set html flag to true/false
    fixed           : true,         // set fixed positioning to keep message at top of screen even when scrolling
    offsetTop       : 0,            // set offset from top
    showCloseButton : true          // toggle message close button
});

Change log:

v2.0.1 (2014-03-11)

  • Fix for msg position to fixed from absolute.

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