Modal class finished

css/style.css

@@ -90,3 +90,15 @@ footer {
     padding: 5px;
     border-radius: 10px;
 }
+
+/* Modal */
+.my-modal {
+    background-color: rgba(255, 255, 255, 0.767);
+    border-radius: 10px;
+    padding: 50px;
+}
+
+.modal-title {
+    font-size: 15px;
+    margin-bottom: 40px;
+}

html/templates/test_modal.html

@@ -1,3 +1,3 @@
-<p>Bienvenue dans cet modal</p>
+<p class="modal-title">Bienvenue dans cet modal</p>
 <div id="timer"></div>
 <button id="ok">OK</button>

js/test/tests.js

@@ -1,7 +1,7 @@
 import { Timer } from "../ui/timer.js";
 import { Modal } from "../ui/modal.js";
 import { TemplateEngine } from "../ui/templeting_engine.js";
-import { Initialzer } from "../commun/commun.js";
+import { Initialzer } from "../commun/initialzer.js ";
 import { AgentBuilder } from "../api/agent.js";
 import { Auth } from "../auth/auth.js";
 import { PlanetBuilder } from "../api/planet.js";
@@ -54,6 +54,7 @@ let tests  = {
         //});
     },
     modal: function() {
+
         let template_engine = new TemplateEngine(temp_path);
         
         let timer = new Timer(60, 1, "s");
@@ -62,11 +63,10 @@ let tests  = {
                 <p>${time}</p>
             `);
         });
-
         template_engine.render("templates/login.html");
 
         let modal = new Modal("test-modal", template_engine);
-        modal.enable = false;
+        modal.add_class("my-modal")
 
         modal.render("templates/test_modal.html");
 

js/ui/modal.js

@@ -8,7 +8,7 @@ export class Modal {
 
     render(template) {
         this.template_engine.get_template((reponse) => {
-            $(this.tag).html(`
+            $(this.tag).prepend(`
                 <dialog id="${this.name}" class="${this.modal_class} modal-disable">
                     ${reponse}
                 </dialog>
@@ -16,6 +16,10 @@ export class Modal {
         }, template);
     }
 
+    on_close(callback) {
+        document.querySelector(`#${this.name}`).addEventListener("close", callback);
+    }
+
     add_class(modal_class) {
         this.modal_class = `${this.modal_class} ${modal_class}`;
     }