fix fade

AlertAsset.php

@@ -18,9 +18,4 @@ class AlertAsset extends AssetBundle
     public $js = [
         'alert.js',
     ];
-
-    public $depends = [
-        'yii\web\JqueryAsset',
-        'yii\bootstrap\BootstrapAsset',
-    ];
 }

FlashMessage.php

@@ -2,14 +2,20 @@
 
 namespace stronglab\alert;
 
+use yii\helpers\Html;
+
 class FlashMessage extends \yii\base\Widget
 {
+    public $fade = true;
+
     public function init()
     {
+        $call = [];
         $view = $this->getView();
         AlertAsset::register($view);
-        if (Yii::$app->session->getAllFlashes()) {
-            $this->registerJs('showMessage("' . implode('<br/>', Yii::$app->session->getAllFlashes()) . '")');
+        foreach (\Yii::$app->session->getAllFlashes() as $key => $message) {
+            $call[] = 'showMessage("' . Html::encode($message) . '", "flash-alert-' . $key . '", ' . (int)$this->fade . ');';
         }
+        $view->registerJs(implode("\n", $call));
     }
 }

web/alert.css

@@ -1,13 +1,27 @@
 .flash-modal {
     position: fixed;
-    top: 20px;
     right: 30px;
     z-index: 9999;
     display: none;
-    width: 350px;
     padding: 30px;
     text-align: center;
     border-radius: 4px;
-    border: 1px #9acfea solid;
-    font-size: 1.1em;
+}
+
+.flash-alert-info {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+    color: #31708f;
+}
+
+.flash-alert-error {
+    background-color: #ff5b51;
+    border-color: #ff50a5;
+    color: #FFF;
+}
+
+.flash-alert-success {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+    color: #3c763d;
 }

web/alert.js

@@ -1,32 +1,40 @@
-$(".flash-modal").bind("contextmenu", function (e) {
+$(document).on("contextmenu", ".flash-modal", function (e) {
     e.preventDefault();
     $(this).fadeOut(420);
 });
 
-function showMessage(message, fade, type) {
+function showMessage(message, type, fade) {
     fade = typeof fade !== "undefined" ? fade : 1;
-    type = typeof type !== "undefined" ? type : "alert-info";
-    var obj = $(".flash-modal");
+    type = typeof type !== "undefined" ? type : "flash-alert-info";
+    var style;
+    var top = 20 + $(".flash-modal").length * 100;
+    style = "top: " + top + "px";
+    var obj = $('<div>', {
+        'class': 'flash-modal',
+        'style': style
+    });
+    obj.appendTo('body');
     obj.html("<b>" + message + "</b>");
     obj.addClass(type);
     obj.stop().animate({opacity: "100"});
     obj.show();
     if (fade) {
-        messageBoxFadeOut();
+        messageBoxFadeOut(obj);
         obj.mouseover(
             function () {
                 if ($(this).is(":animated")) {
                     $(this).stop().animate({opacity: "100"});
                 }
             }
         );
-        obj.mouseleave(messageBoxFadeOut);
+        obj.mouseleave(function () {
+            messageBoxFadeOut(obj);
+        });
 
     }
 }
 
-function messageBoxFadeOut() {
-    var obj = $(".flash-modal");
+function messageBoxFadeOut(obj) {
     obj.fadeOut(7000, function () {
         obj.removeClass("alert-danger alert-success alert-info");
     });