dismess popups

templates/base.html

@@ -76,7 +76,10 @@
             {% if messages %}
                 <div class="flash-stack">
                     {% for category, message in messages %}
-                        <div class="flash {{ category }}">{{ message }}</div>
+                        <div class="flash {{ category }}" role="{{ 'alert' if category == 'error' else 'status' }}">
+                            <span class="flash__message">{{ message }}</span>
+                            <button class="flash__dismiss" type="button" aria-label="Dismiss message" data-dismiss-flash>&times;</button>
+                        </div>
                     {% endfor %}
                 </div>
             {% endif %}
@@ -133,6 +136,18 @@
     })();
     </script>
     <script>
+    (() => {
+        document.addEventListener('click', (event) => {
+            const button = event.target.closest('[data-dismiss-flash]');
+            if (!button) return;
+            const flash = button.closest('.flash');
+            const stack = button.closest('.flash-stack');
+            if (flash) flash.remove();
+            if (stack && !stack.querySelector('.flash')) stack.remove();
+        });
+    })();
+    </script>
+    <script>
     (() => {
       function positionBubble(tip) {
         const bubble = tip.querySelector('.info-tip__bubble');