add close button modal mobile screen

ptduy14 · May 16, 2024 · 88203de · 88203de
1 parent 5c2c115
commit 88203de
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 5 deletions.
diff --git a/main.js b/main.js
@@ -1,6 +1,7 @@
 var toggleButton = document.querySelector('.toggle');
 var modal = document.querySelector('.modal')
 var layer = document.querySelector('.layer')
+var closeModal = document.querySelector('.close_modal');
 
 toggleButton.addEventListener('click', () => {
     modal.classList.add("modal-active")
@@ -10,4 +11,11 @@ toggleButton.addEventListener('click', () => {
 layer.addEventListener('click', () => {
     modal.classList.remove("modal-active")
     layer.classList.remove("layer-active")
-})
+})
+
+if (closeModal) {
+    closeModal.addEventListener('click', () => {
+        modal.classList.remove("modal-active")
+        layer.classList.remove("layer-active")
+    })
+}
diff --git a/pages/ex-four.html b/pages/ex-four.html
@@ -24,7 +24,7 @@
     <div class="toggle">MORE</div>
     <div class="layer"></div>
     <div class="modal">
-      <div class="nav"></div>
+      <div class="close_modal">X</div>
       <div class="content">
         <p>
           Thiết kế polygon hình tứ giác theo thao tác click chuột của người

diff --git a/pages/ex-one.html b/pages/ex-one.html
@@ -23,7 +23,7 @@
   <body>
     <div class="toggle">MORE</div>
     <div class="modal">
-      <div class="nav"></div>
+      <div class="close_modal">X</div>
       <div class="content">
         <p>
           Chấm trên bảng đồ chọn Marker và Marker di chuyển theo thao tác của

diff --git a/pages/ex-three.html b/pages/ex-three.html
@@ -16,7 +16,7 @@
 <body>
   <div class="toggle">MORE</div>
     <div class="modal">
-      <div class="nav"></div>
+      <div class="close_modal">X</div>
       <div class="content">
         <p>
           Vẽ Polyline bằng thao tác click chuột trên bản đồ. Trong đó: </br>

diff --git a/pages/ex-two.html b/pages/ex-two.html
@@ -23,7 +23,7 @@
   <body>
     <div class="toggle">MORE</div>
     <div class="modal">
-      <div class="nav"></div>
+      <div class="close_modal">X</div>
       <div class="content">
         <p>
           Tính và hiển thị khoảng cách từ hai điểm (dùng Popup hiển thị tại vị

diff --git a/style.css b/style.css
@@ -80,4 +80,25 @@ footer {
 
 .modal > a:nth-last-child(1) {
     margin-left: 10px;
+}
+
+.close_modal {
+    display: none;
+}
+
+@media (max-width: 739px) {
+    .modal {
+        width: 100%;
+    }
+
+    .close_modal {
+        transform: translateX(-8px);
+        transform: translateY(-6px);
+        display: inline-block;
+        margin-bottom: 20px;
+        padding: 10px 15px;
+        background-color: white;
+        color: black;
+        border-radius: 50px;
+    }
 }