fix: Improve modal event binding and close button functionality

- Remove inline onclick attribute from close button
- Add ID-based event listener binding in DOMContentLoaded
- Add preventDefault and stopPropagation to close handler
- Add console logging for debugging
- Add null checks for modal elements

static/js/detail-modal.js

@@ -207,22 +207,37 @@ function closeDetailModal() {
     modal.classList.remove('active');
 }
 
-// Close modal when clicking outside
+// Initialize modal event listeners
 document.addEventListener('DOMContentLoaded', () => {
     const modal = document.getElementById('detail-modal');
+    const closeBtn = document.getElementById('modal-close-btn');
 
-    modal.addEventListener('click', (e) => {
-        if (e.target === modal) {
+    // Close button click
+    if (closeBtn) {
+        closeBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
             closeDetailModal();
-        }
-    });
+        });
+    }
 
-    // Close on escape key
+    // Click outside modal
+    if (modal) {
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                closeDetailModal();
+            }
+        });
+    }
+
+    // Escape key
     document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && modal.classList.contains('active')) {
+        if (e.key === 'Escape' && modal && modal.classList.contains('active')) {
             closeDetailModal();
         }
     });
+
+    console.log('Detail modal initialized');
 });
 
 // Export for use in other modules

templates/index.html

@@ -261,7 +261,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h2>Capture Details</h2>
-                <button class="modal-close" onclick="closeDetailModal()">&times;</button>
+                <button id="modal-close-btn" class="modal-close">&times;</button>
             </div>
             <div class="modal-body" id="modal-body-content">
                 <!-- Content loaded dynamically -->