Modificare Modal JavaS

src/about-modal.js

@@ -1,18 +1,13 @@
-document.addEventListener('DOMContentLoaded', function () {
-  const refs = {
-    openModalBtn: document.getElementById('data-modal-open'),
-    closeModalBtn: document.getElementById('data-modal-close'),
-    modal: document.getElementById('data-modal'),
-  };
+document.addEventListener('DOMContentLoaded', function() {
+    const openModalBtn = document.querySelector(".read-more-btn");
+    const closeModalBtn = document.querySelector(".close-btn");
+    const modal = document.querySelector("[data-modal-target]");
 
-  if (refs.openModalBtn && refs.closeModalBtn && refs.modal) {
-    refs.openModalBtn.addEventListener('click', toggleModal);
-    refs.closeModalBtn.addEventListener('click', toggleModal);
-  }
+    openModalBtn.addEventListener("click", function() {
+        modal.classList.remove("hidden-modal");
+    });
 
-  function toggleModal() {
-    if (refs.modal) {
-      refs.modal.classList.toggle('is-hidden-about');
-    }
-  }
+    closeModalBtn.addEventListener("click", function() {
+        modal.classList.add("hidden-modal");
+    });
 });

src/partials/about.html

@@ -25,9 +25,9 @@ <h1 class="about-h1">HOW IT'S MADE?</h1>
             15 types of coffee and 23 milkshakes.
           </p>
         </div>
-        <div id="data-modal" class="modal-about is-hidden-about">
-          <div class="modal-content-about">
-            <button id="data-modal-close" class="close-btn">
+        <div class="custom-modal hidden-modal" data-modal-target>
+          <div class="modal-data">
+            <button class="close-btn">
               <svg
                 class="close-icon"
                 fill="currentColor"
@@ -108,7 +108,7 @@ <h1 class="about-h1">HOW IT'S MADE?</h1>
             </div>
           </div>
         </div>
-        <button id="data-modal-open" type="button" class="read-more-btn">
+        <button type="button" class="read-more-btn">
           Read More
           <svg id="svg-btn">
             <use href="./images/icon-about.svg#btn-title-icon"></use>

src/sass/about.scss

@@ -216,7 +216,20 @@
   }
 }
 
-.modal-about {
+.custom-modal .modal-data {
+  margin: 0 auto;
+  padding-top: 50px;
+  width: 400px;
+  height: 600px;
+  background-image: url(../images/about-modal-bg.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.custom-modal {
   position: fixed;
   left: 0;
   top: 0;
@@ -226,13 +239,16 @@
   justify-content: center;
   align-items: center;
   z-index: 1;
-  background-color: rgb(255, 184, 202, 40%);
-  box-shadow: 0 1px 1px 0 rgb(0, 0, 0, 14%), 0 1px 3px 0 rgb(0, 0, 0, 12%),
-    0 2px 1px 0 rgb(0, 0, 0, 20%);
+  background-color: rgba(255, 184, 202, 0.4);
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12),
+    0 2px 1px 0 rgba(0, 0, 0, 0.2);
 }
-.is-hidden-about {
+
+.hidden-modal {
+  display: none;
   visibility: hidden;
   transform: scale(1.2);
+  transition: visibility 0s, transform 0.5s;
 }
 .close-btn {
   display: flex;
@@ -254,19 +270,8 @@
   height: 15px;
   stroke: #000;
 }
-.modal-content-about {
-  margin: 0 auto;
-  padding-top: 30px;
-  width: 400px;
-  height: 600px;
-  background-image: url(../images/about-modal-bg.jpg);
-  background-repeat: no-repeat;
-  background-size: cover;
-  position: relative;
-  border: 1px solid transparent;
-  border-radius: 4px;
-}
-.modal-about p {
+
+.custom-modal p {
   color: red;
   text-indent: 5px;
   margin-bottom: 0;

src/sass/contacts.scss

@@ -203,7 +203,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: #ffffff;
+
   transition: transform var(--transition);
 }