From a9fcd4b6de14fa809abed798cab609da35030e6c Mon Sep 17 00:00:00 2001
From: Kevin Veen-Birkenbach <kevin@veen.world>
Date: Thu, 9 Jan 2025 15:38:48 +0100
Subject: [PATCH] Solved close modals bug

---
 app/static/js/modal.js             | 22 ++++++++++++++++++++++
 app/templates/moduls/modal.html.j2 |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/app/static/js/modal.js b/app/static/js/modal.js
index f06702f..29073fa 100644
--- a/app/static/js/modal.js
+++ b/app/static/js/modal.js
@@ -1,4 +1,7 @@
 function openDynamicPopup(subitem) {
+  // Schließe alle offenen Modals
+  closeAllModals();
+
   // Setze den Titel
   document.getElementById('dynamicModalLabel').innerText = subitem.description;
 
@@ -76,3 +79,22 @@ function openDynamicPopup(subitem) {
   const modal = new bootstrap.Modal(document.getElementById('dynamicModal'));
   modal.show();
 }
+
+function closeAllModals() {
+  const modals = document.querySelectorAll('.modal.show'); // Alle offenen Modals finden
+  modals.forEach(modal => {
+      const modalInstance = bootstrap.Modal.getInstance(modal);
+      if (modalInstance) {
+          modalInstance.hide(); // Modal ausblenden
+      }
+  });
+
+  // Entferne die "modal-backdrop"-Elemente
+  const backdrops = document.querySelectorAll('.modal-backdrop');
+  backdrops.forEach(backdrop => backdrop.remove());
+
+  // Entferne die Klasse, die den Hintergrund ausgraut
+  document.body.classList.remove('modal-open');
+  document.body.style.overflow = '';
+  document.body.style.paddingRight = '';
+}
diff --git a/app/templates/moduls/modal.html.j2 b/app/templates/moduls/modal.html.j2
index fa41f8e..b76b61f 100644
--- a/app/templates/moduls/modal.html.j2
+++ b/app/templates/moduls/modal.html.j2
@@ -32,7 +32,7 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="closeAllModals()">Close</button>
       </div>
     </div>
   </div>