* support display multiple messagers.

src/js/messager.js

@@ -10,7 +10,7 @@
     'use strict';
 
     var id = 0;
-    var template = '<div class="messager messager-{type} {placement}" id="messager{id}" style="display:none"><div class="messager-actions"></div><div class="messager-content"></div></div>';
+    var template = '<div class="messager messager-{type} {placement}" id="messager{id}"><div class="messager-content"></div><div class="messager-actions"></div></div>';
     var defaultOptions = {
         type: 'default',
         placement: 'top',
@@ -26,7 +26,7 @@
         fade: true,
         scale: true
     };
-    var lastMessager;
+    var all = {};
 
     var Messager = function(message, options) {
         var that = this;
@@ -100,14 +100,6 @@
         var that = this,
             options = this.options;
 
-        if(lastMessager) {
-            if(lastMessager.id == that.id) {
-                that.$.removeClass('in');
-            } else if(lastMessager.isShow) {
-                lastMessager.hide();
-            }
-        }
-
         if(that.hiding) {
             clearTimeout(that.hiding);
             that.hiding = null;
@@ -118,14 +110,18 @@
             that.$.find('.messager-content').html(that.message);
         }
 
-        that.$.appendTo(options.parent).show();
+        if(that.isShow) return;
 
-        if(options.placement === 'top' || options.placement === 'bottom' || options.placement === 'center') {
-            that.$.css('left', ($(window).width() - that.$.width()) / 2);
+        var placement = options.placement;
+        var $parent = $(options.parent);
+        var $holder = $parent.children('.messagers-holder.' + placement);
+        if(!$holder.length) {
+            $holder = $('<div/>').attr('class', 'messagers-holder ' + placement).appendTo($parent);
         }
-
-        if(options.placement === 'left' || options.placement === 'right' || options.placement === 'center') {
-            that.$.css('top', ($(window).height() - that.$.height()) / 2);
+        $holder.append(that.$);
+        if(placement === 'center') {
+            var offset = $(window).height() - $holder.height();
+            $holder.css('top', Math.max(-offset, offset/2));
         }
 
         that.$.addClass('in');
@@ -137,7 +133,6 @@
         }
 
         that.isShow = true;
-        lastMessager = that;
     };
 
     Messager.prototype.hide = function() {
@@ -145,7 +140,9 @@
         if(that.$.hasClass('in')) {
             that.$.removeClass('in');
             setTimeout(function() {
+                var $parent = that.$.parent();
                 that.$.remove();
+                if(!$parent.children().length) $parent.remove();
             }, 200);
         }
 

src/less/modules/messager.less

@@ -9,47 +9,19 @@
 // Messager style for module messager.js
 
 .messager {
-  position: fixed;
+  display: table;
   color: @color-light;
   background-color: @color-dark;
   background-color: rgba(0, 0, 0, 0.8);
   border-radius: @messager-radius;
-  max-width: 80%;
-  z-index: 99999;
-  &:extend(.clearfix all);
-
-  &.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;
-  }
+  margin: 10px;
+  pointer-events: auto;
 }
 
 .messager-content {
-  padding: 10px 20px;
-  float: left;
+  padding: 10px 15px;
+  display: table-cell;
+  vertical-align: top;
 
   > [class^='icon-'] {
      display: inline-block;
@@ -58,7 +30,8 @@
 }
 
 .messager-actions {
-  float: right;
+  display: table-cell;
+  vertical-align: top;
 
   > .action {
     color: #fafafa;
@@ -87,6 +60,61 @@
   .action-icon + .action-text {margin-left: 8px;}
 }
 
+.messagers-holder {
+  z-index: 99999;
+  position: fixed;
+  padding: 10px;
+  pointer-events: none;
+  .transition-fast(top);
+
+  &.top {
+    top: 0;
+    
+  }
+
+  &.top-left {
+    top: 0;
+    left: 0;
+  }
+
+  &.top-right {
+    top: 0;
+    right: 0;
+  }
+
+  &.bottom {
+    bottom: 0;
+  }
+
+  &.bottom-left {
+    bottom: 0;
+    left: 0;
+  }
+
+  &.bottom-right {
+    bottom: 0;
+    right: 0;
+  }
+
+  &.top-right,
+  &.bottom-right {
+    .messager { margin-left: auto; }
+  }
+
+  &.center {
+    top: 0;
+  }
+
+  &.top,
+  &.bottom,
+  &.center {
+    left: 0;
+    right: 0;
+
+    .messager { margin: 10px auto; }
+  }
+}
+
 .messager-primary {
   background-color: @state-primary-inverse-bg;
 }