Adding modal to frontpage

templates/create.html

@@ -52,31 +52,6 @@
 		  </div>
     </section>
     
-
-    <button class="js-modal-trigger" data-target="modal-js-example" id="modal-js">
-    </button> 
-
-
-
-    <div class="modal" id="modal-js-example">
-      <div class="modal-background"></div>
-      <div class="modal-card">
-        <header class="modal-card-head">
-          <p class="modal-card-title">Cannot add set!</p>
-          <button class="delete" aria-label="close"></button>
-        </header>
-        <section class="modal-card-body">
-          Set number does not exists: 
-          <br>
-          <b id="error-code"></b>
-        </section>
-        <footer class="modal-card-foot">
-          <div class="buttons">
-            <button class="button is-primary">OK</button>
-          </div>
-        </footer>
-      </div>
-    </div>
     </body>
 
 <script>

templates/frontpage.html

@@ -229,6 +229,32 @@ body {
 
 	  {% endfor %}
 	</div>
+
+
+	<button class="js-modal-trigger" data-target="modal-js-example" id="modal-js">
+    </button> 
+
+
+
+    <div class="modal" id="modal-js-example">
+      <div class="modal-background"></div>
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">First time?</p>
+          <button class="delete" aria-label="close"></button>
+        </header>
+        <section class="modal-card-body">
+          The database tables does not exists. Create them? 
+        </section>
+        <footer class="modal-card-foot">
+          <div class="buttons">
+            <button class="button is-primary">Create</button>
+          </div>
+        </footer>
+      </div>
+    </div>
+
+
 	<script>
 	  function searchFunction() {
 	    var input, filter, gridContainer, gridItems, i, txtValue;
@@ -518,6 +544,49 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 });
 
+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();
+  }
+});
+});
 
 	</script>
   </body>