diff --git a/css/style.css b/css/style.css
index 0188037..0d537e7 100644
--- 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
index 1dbce4a..7162a11 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,8 @@
- Modal Window
+ Modal Window
@@ -11,7 +11,23 @@
-
+
+
I'm a modal window 😍
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
diff --git a/js/script.js b/js/script.js
index b138918..d2e987f 100644
--- 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();
+ }
}
});