Fix #1411 Cannot cloe alert

templates/web/account/base.html.twig

@@ -46,5 +46,14 @@
                 </div>
             </div>
         </div>
-        {% block scripts %}{% endblock %}
+        {% block scripts %}
+            <script type="text/javascript">
+                // close alerts
+                $(document).on("click", ".alert .alert-block-close a", function(e){
+                    e.preventDefault();
+                    $(this).closest('.alert').alert('close');
+                    return false;
+                });
+            </script>
+        {% endblock %}
 {% endblock %}

templates/web/login/common/macros.html.twig

@@ -138,9 +138,7 @@
     </div>
 {% endmacro %}
 
-{% macro flashes() %}
+{% macro alert(type, message) %}
-    {% for type in app.getAvailableFlashTypes %}
-        {% for message in app.getFlash(type) %}
     <div class="alert alert-{{ type }}">
         {% set sign = "icon-exclamation-sign" %}
 
@@ -160,6 +158,13 @@
             </tr>
         </table>
     </div>
+{% endmacro %}
+
+{% macro flashes() %}
+    {% import _self as login %}
+    {% for type in app.getAvailableFlashTypes %}
+        {% for message in app.getFlash(type) %}
+            {{ login.alert(type, message) }}
         {% endfor %}
     {% endfor %}
 {% endmacro %}

www/skins/account/skin.less

@@ -257,8 +257,8 @@ ul {
     border-left: 1px solid darken(@warningBackground, 20%);
 }
 
-.alert .close {
+.alert-block-close a {
-    position: static;
+    color: @white;
 }
 
 .alert table {

www/skins/account/variables.less

@@ -269,20 +269,20 @@
 
 // Form states and alerts
 // -------------------------
-@warningText:             #c09853;
+@warningText:             @white;
-@warningBackground:       #fcf8e3;
+@warningBackground:       @grayDark;
 @warningBorder:           darken(spin(@warningBackground, -10), 3%);
 
-@errorText:               #b94a48;
+@errorText:               @white;
-@errorBackground:         #f2dede;
+@errorBackground:         #c9322b;
 @errorBorder:             darken(spin(@errorBackground, -10), 3%);
 
-@successText:             #468847;
+@successText:             @white;
-@successBackground:       #dff0d8;
+@successBackground:       #1f914f;
 @successBorder:           darken(spin(@successBackground, -10), 5%);
 
-@infoText:                #3a87ad;
+@infoText:                @white;
-@infoBackground:          #d9edf7;
+@infoBackground:          #4889af;
 @infoBorder:              darken(spin(@infoBackground, -10), 7%);