3 files changed, 4 insertions, 2 deletions

diff --git a/assets/img/web-root-procedure/sfp-sfp.jpg b/assets/img/web-root-procedure/sfp-sfp.jpg
new file mode 100644
index 0000000..28ad636
--- /dev/null
+++ b/assets/img/web-root-procedure/sfp-sfp.jpg
diff --git a/assets/img/web-root-procedure/ttl-sfp.jpg b/assets/img/web-root-procedure/ttl-sfp.jpg
new file mode 100644
index 0000000..74334e6
--- /dev/null
+++ b/assets/img/web-root-procedure/ttl-sfp.jpg
diff --git a/assets/js/modal.js b/assets/js/modal.js
index 2cae945..c18d751 100644
--- a/assets/js/modal.js
+++ b/assets/js/modal.js
@@ -1,12 +1,12 @@
 var modals = document.querySelectorAll("[data-modal]");
 var modalToogles = document.querySelectorAll("[data-toogle=modal]");
 
-
 [...modals].forEach(modal => {
     var closeBtns = modal.getElementsByClassName("close");
     [...closeBtns].forEach(closeBtn => {
         closeBtn.addEventListener("click", (event) => {
             modal.style.display = "none";
+            modal.dispatchEvent( new Event('modal-close'));
         });
     })
 });
@@ -15,11 +15,13 @@ var modalToogles = document.querySelectorAll("[data-toogle=modal]");
     toogle.addEventListener("click", (event) => {
         var modal = document.querySelector(toogle.getAttribute('data-target'));
         modal.style.display = "block";
+        modal.dispatchEvent(new Event('modal-open'));
     });
 });
 
 window.addEventListener("click", function(event) {
-    if ([...modals].includes(event.target)) {
+    if ([...modals].filter(modal => modal.getAttribute("data-modal-backdrop") !== "static").includes(event.target)) {
+        event.target.dispatchEvent( new Event('modal-close'));
         event.target.style.display = "none";
     }
 });