diff --git a/examples/messager.html b/examples/messager.html
new file mode 100644
index 0000000000000000000000000000000000000000..259daaf72e71481cc407fe3d81f4f9d1a2878265
--- /dev/null
+++ b/examples/messager.html
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+
+
+
+ ZUI
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/js/messager.js b/src/js/messager.js
new file mode 100644
index 0000000000000000000000000000000000000000..a9106fab54246875202b309a382ef782a7099e55
--- /dev/null
+++ b/src/js/messager.js
@@ -0,0 +1,76 @@
+/* Messager: show messager float on your page */
++function($, window, document, Math)
+{
+ "use strict";
+
+ var id = 0;
+ var template = '';
+
+ function Messager()
+ {
+ this.show = function(message, type, placement, time, parent)
+ {
+ $('.messager').hide();
+
+ id++;
+ type = type || 'default';
+ time = time || 2000;
+ parent = parent || 'body';
+ placement = placement || 'top';
+ var msg = $(template.format({message: message, type: type, placement: placement, id: id})).appendTo(parent);
+ msg.find('.close-messager').click(function(){$(this).closest('.messager').fadeOut();});
+
+ if(placement == 'top' || placement == 'bottom')
+ {
+ msg.css('left', ($(parent).width() - msg.width() - 50)/2);
+ }
+
+ msg.fadeIn();
+
+ setTimeout(function(){$('#messager' + id).fadeOut(function(){$(this).remove()});}, time);
+
+ return msg;
+ }
+
+ this.primary = function(message, placement, time, parent)
+ {
+ return this.show(message, 'primary', placement, time, parent);
+ }
+
+ this.success = function(message, placement, time, parent)
+ {
+ return this.show(' ' + message, 'success', placement, time, parent);
+ }
+
+ this.info = function(message, placement, time, parent)
+ {
+ return this.show(' ' + message, 'info', placement, time, parent);
+ }
+
+ this.warning = function(message, placement, time, parent)
+ {
+ return this.show('' + message, 'warning', placement, time, parent);
+ }
+
+ this.danger = function(message, placement, time, parent)
+ {
+ return this.show('' + message, 'danger', placement, time, parent);
+ }
+
+ this.important = function(message, placement, time, parent)
+ {
+ return this.show(message, 'important', placement, time, parent);
+ }
+
+ this.special = function(message, placement, time, parent)
+ {
+ return this.show(message, 'special', placement, time, parent);
+ }
+ }
+
+ var messager = new Messager();
+
+ window.messager = messager;
+
+
+}(jQuery,window,document,Math);
diff --git a/src/less/modules/messager.less b/src/less/modules/messager.less
new file mode 100644
index 0000000000000000000000000000000000000000..cbb72e729e7bb155dbf1cb7342dc498a6c0a6a1c
--- /dev/null
+++ b/src/less/modules/messager.less
@@ -0,0 +1,109 @@
+.messager
+{
+ position: fixed;
+ color: @color-light;
+ background-color: @color-dark;
+ background-color: rgba(0, 0, 0, 0.8);
+ border-radius: 20px;
+ padding-right: 50px;
+ max-width: 80%;
+ z-index: 99999;
+
+ &.top
+ {
+ top: 20px;
+ }
+
+ &.top-left
+ {
+ top: 20px;
+ left: 20px;
+ }
+
+ &.top-right
+ {
+ top: 20px;
+ right: 20px;
+ }
+
+ &.bottom
+ {
+ bottom: 20px;
+ }
+
+ &.bottom-left
+ {
+ bottom: 20px;
+ left: 20px;
+ }
+
+ &.bottom-right
+ {
+ bottom: 20px;
+ right: 20px;
+ }
+}
+
+.messager-content
+{
+ padding: 10px 20px;
+
+ > [class^='icon-']
+ {
+ display: inline-block;
+ margin-right: 8px;
+ }
+}
+
+.close-messager
+{
+ position: absolute;
+ right: 10px;
+ top: 5px;
+ background: none;
+ border: none;
+ color: #fafafa;
+ color: rgba(255, 255, 255, 0.6);
+ font-size: 20px;
+
+ &:hover
+ {
+ color: #fff;
+ }
+}
+
+.messager-primary
+{
+ background-color: @state-primary-inverse-bg;
+}
+
+.messager-success
+{
+ background-color: @state-success-inverse-bg;
+}
+
+.messager-info
+{
+ background-color: @state-info-inverse-bg;
+}
+
+.messager-warning
+{
+ background-color: @state-warning-inverse-bg;
+}
+
+.messager-danger
+{
+ background-color: @state-danger-inverse-bg;
+}
+
+.messager-important
+{
+ background-color: @state-important-inverse-bg;
+}
+
+.messager-special
+{
+ background-color: @state-special-inverse-bg;
+}
+