From 62e000e575e401fc42767a3a9e04df4aff552d50 Mon Sep 17 00:00:00 2001
From: Katrina Wheelan <katrina.wheelan@detroitmi.gov>
Date: Wed, 31 Jul 2024 15:18:05 -0400
Subject: [PATCH] #51 fix modal close error

---
 src/index.html                   |  2 +-
 src/js/components/modal/modal.js | 19 +++++++++++++------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/index.html b/src/index.html
index 028589c..c95741b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -171,7 +171,7 @@ <h6 id="section-header"><strong>Supplemental</strong></h6>
       <div class="modal-content">
         <div class="modal-header">
             <h5 class="modal-title" id="modal-title"></h5>
-          <button type="button" id="modal-close-x" class="close" data-dismiss="modal" aria-label="Close">
+          <button type="button" id="modal-close-x" class="close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
diff --git a/src/js/components/modal/modal.js b/src/js/components/modal/modal.js
index 14fd47b..460e17c 100644
--- a/src/js/components/modal/modal.js
+++ b/src/js/components/modal/modal.js
@@ -6,12 +6,12 @@ function clearModal(){
     document.getElementById('modal-body').innerHTML = '';
 }
 
-function hideModal(modal_id) {
-    $('#' + modal_id).modal('hide');
+function hideModal() {
+    $('#main-modal').modal('hide');
 }
 
-function showModal(modal_id) {
-    $('#' + modal_id).modal('show');
+function showModal() {
+    $('#main-modal').modal('show');
 }
 
 function showModalHandler() {
@@ -30,6 +30,10 @@ const Submit = {
         };
         // Adding the handler reference as the event listener
         modal.addEventListener('submit', this.handler);
+
+        // add event listener to enable close x
+        const x = modal.querySelector('#modal-close-x');
+        x.addEventListener('click', hideModal);
     },
 
     deinit: function() {
@@ -39,6 +43,9 @@ const Submit = {
             modal.removeEventListener('submit', this.handler);
             this.handler = null;
         }
+        // remove event listener to enable close x
+        const x = modal.querySelector('#modal-close-x');
+        x.removeEventListener('click', hideModal);
     }
 };
 
@@ -60,8 +67,8 @@ const Title = {
 }
 
 export const Modal = {
-    hide : function() { hideModal('main-modal') },
-    show : function() { showModal('main-modal') },
+    hide : hideModal,
+    show : showModal,
     clear : clearModal,
     Title : Title,
     Link : Link,