Add modal for GONG charte

index.html

@@ -21,6 +21,7 @@
           <img src="./img/gong.png">
         </figure>
         <p class="subtitle is-uppercase mb-6"><q>La résistance à l'oppression est un droit naturel</q> L. DELGRES</p>
+        <h1 class="title is-3"><a class="js-modal-trigger" data-target="modal-js-example">LA CHARTE DU GONG - Juin 1963</a></h1>
       </div>
     </section>
     <hr>
@@ -41,5 +42,21 @@
         {{/data}}
       </script>
     </div>
+    <div id="modal-js-example" class="modal">
+      <div class="modal-background"></div>
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title has-text-centered">LA CHARTE DU GONG - Juin 1963</p>
+          <button class="delete" aria-label="close"></button>
+        </header>
+        <section class="modal-card-body has-text-justified">
+
+        </section>
+        <footer class="modal-card-foot">
+          <button class="button">Fermer</button>
+        </footer>
+      </div>
+    </div>
+    <script src="./js/main.js"></script>
   </body>
 </html>

js/main.js

@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Functions to open and close a modal
+    function openModal($el) {
+      $el.classList.add('is-active');
+    }
+  
+    function closeModal($el) {
+      $el.classList.remove('is-active');
+    }
+  
+    function closeAllModals() {
+      (document.querySelectorAll('.modal') || []).forEach(($modal) => {
+        closeModal($modal);
+      });
+    }
+  
+    // Add a click event on buttons to open a specific modal
+    (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
+      const modal = $trigger.dataset.target;
+      const $target = document.getElementById(modal);
+  
+      $trigger.addEventListener('click', () => {
+        openModal($target);
+      });
+    });
+  
+    // Add a click event on various child elements to close the parent modal
+    (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+      const $target = $close.closest('.modal');
+  
+      $close.addEventListener('click', () => {
+        closeModal($target);
+      });
+    });
+  
+    // Add a keyboard event to close all modals
+    document.addEventListener('keydown', (event) => {
+      if(event.key === "Escape") {
+        closeAllModals();
+      }
+    });
+});