Add files via upload

steffano-da-cruz · Mar 18, 2024 · d68a738 · d68a738
1 parent e1e90ad
commit d68a738
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 20 deletions.
diff --git a/css/style.css b/css/style.css
@@ -47,9 +47,8 @@ body {
 }
 
 .close-modal {
+  width: 1.8rem;
   align-self: flex-end;
-  font-size: 2rem;
-  color: #333;
   cursor: pointer;
   border: none;
   background: none;

diff --git a/index.html b/index.html
@@ -2,16 +2,32 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>Modal Window</title>
     <link rel="stylesheet" href="./css/style.css" />
+    <title>Modal Window</title>
   </head>
   <body>
     <button class="show-modal">Show modal 1</button>
     <button class="show-modal">Show modal 2</button>
     <button class="show-modal">Show modal 3</button>
 
     <div class="modal hidden">
-      <button class="close-modal">x</button>
+      <button class="close-modal" type="button">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-6 h-6"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M6 18 18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+
       <h1>I'm a modal window 😍</h1>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

diff --git a/js/script.js b/js/script.js
@@ -1,29 +1,33 @@
 "use strict";
 
 const modal = document.querySelector(".modal");
+const showModal = document.querySelectorAll(".show-modal");
 const overlay = document.querySelector(".overlay");
-const btnCloseModal = document.querySelector(".close-modal");
-const btnsShowModal = document.querySelectorAll(".show-modal");
+const closeModal = document.querySelector(".close-modal");
 
-const showModal = function () {
-  modal.classList.remove("hidden");
-  overlay.classList.remove("hidden");
+/* Toggle between showing and not showing the window */
+const toggleModal = function () {
+  modal.classList.toggle("hidden");
+  overlay.classList.toggle("hidden");
 };
 
-const closeModal = function () {
-  modal.classList.add("hidden");
-  overlay.classList.add("hidden");
-};
-
-for (let i = 0; i < btnsShowModal.length; i++) {
-  btnsShowModal[i].addEventListener("click", showModal);
+for (let i = 0; i < showModal.length; i++) {
+  showModal[i].addEventListener("click", toggleModal);
 }
 
-btnCloseModal.addEventListener("click", closeModal);
-overlay.addEventListener("click", closeModal);
+/* Close window by clicking on the closing button */
+closeModal.addEventListener("click", toggleModal);
 
+/* Close window by clicking outside the window */
+overlay.addEventListener("click", toggleModal);
+
+/* Close window by hitting the Esc key */
 document.addEventListener("keydown", function (e) {
-  if (e.key === "Escape" && !modal.classList.contains("hidden")) {
-    closeModal();
+  if (e.key === "Escape") {
+    toggleModal();
+
+    for (let i = 0; i < showModal.length; i++) {
+      showModal[i].blur();
+    }
   }
 });