[BUGFIX] Modal had no close button

TYPO3incubator · Apr 11, 2024 · f45c99a · f45c99a
1 parent f77c0a9
commit f45c99a
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 10 deletions.
diff --git a/assets/javascript/modal.js b/assets/javascript/modal.js
@@ -77,6 +77,13 @@ const openModal = (link) => {
     .catch(error => console.error('Error loading content:', error));
 };
 
+// Close modal function
+const closeModal = () => {
+  const modal = document.getElementById('modal');
+  modal.style.display = 'none';
+  document.body.classList.remove('modal-open');
+};
+
 document.addEventListener('DOMContentLoaded', () => {
   // Get all links with data-cid attribute
   const links = document.querySelectorAll('[data-cid]');
@@ -93,8 +100,22 @@ document.addEventListener('DOMContentLoaded', () => {
   const modal = document.getElementById('modal');
   modal.addEventListener('click', (event) => {
     if (event.target === modal) {
-      modal.style.display = 'none';
-      document.body.classList.remove('modal-open'); // Allow scrolling on background
+      closeModal();
+    }
+  });
+
+  // Close modal when close button is clicked
+  const closeButton = document.querySelector('.modal-close');
+  if (closeButton) {
+    closeButton.addEventListener('click', () => {
+      closeModal();
+    });
+  }
+
+  // Close modal when pressing the Esc key
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      closeModal();
     }
   });
 });

diff --git a/assets/scss/components/_modal.scss b/assets/scss/components/_modal.scss
@@ -8,12 +8,26 @@ body.modal-open {
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }
 
+.modal .container {
+    position: relative;
+}
+
 .modal-content {
     @apply bg-white rounded text-black my-[15%] p-5 shadow-lg;
 }
 
+.modal-close {
+    position: absolute;
+    top: -20px;
+    @apply bg-white rounded-full text-black w-6 h-6 right-0 text-center align-middle cursor-pointer;
+
+    &:hover {
+        @apply bg-black text-white;
+    }
+}
+
 .loading-indicator {
     @apply hidden fixed top-1/2 left-1/2 border border-4 border-white border-t-primary-500 rounded-full animate-spin w-8 h-8;
 
     transform: translate(-50%, -50%);
-}
+}
diff --git a/assets/scss/components/_notify.scss b/assets/scss/components/_notify.scss
@@ -1,3 +1,3 @@
 .notification {
-    @apply hidden fixed top-2 left-1/2 bg-primary-500 text-primarytext py-1 px-1 rounded shadow-lg z-50 translate-x-[-50%];
+    @apply hidden fixed top-2 left-1/2 bg-primary-500 text-primarytext rounded shadow-lg z-50 translate-x-[-50%] my-[15%] p-5;
 }
diff --git a/local_packages/success/Resources/Private/Templates/ProductLaunch/Pages/Default.html b/local_packages/success/Resources/Private/Templates/ProductLaunch/Pages/Default.html
@@ -20,10 +20,5 @@
             </div>
         </f:for>
     </main>
-    <div id="modal" class="modal">
-        <div class="container mx-auto px-5">
-            <div class="modal-content" id="modal-content"></div>
-            <div id="loading-indicator" class="loading-indicator"></div>
-        </div>
-    </div>
+    <f:render partial="Page/Modal" />
 </html>
diff --git a/local_packages/success/Resources/Private/Templates/_LandingPage/Partials/Page/Modal.html b/local_packages/success/Resources/Private/Templates/_LandingPage/Partials/Page/Modal.html
@@ -0,0 +1,11 @@
+<html
+    data-namespace-typo3-fluid="true"
+>
+<div id="modal" class="modal">
+    <div class="container mx-auto px-5">
+        <div class="modal-close">X</div>
+        <div class="modal-content" id="modal-content"></div>
+        <div id="loading-indicator" class="loading-indicator"></div>
+    </div>
+</div>
+</html>