Merge pull request #64 from kwheelan/51-fix-modal-x

#51 fix modal close error
CityOfDetroit · Jul 31, 2024 · dbd6b5a · dbd6b5a
2 parents 6a3576a + 62e000e
commit dbd6b5a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/index.html b/src/index.html
@@ -137,7 +137,7 @@ <h5 class="section-header"><strong>Supplemental</strong></h5>
       <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
@@ -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,