Added task Модалка

js-tasks-ru · Dec 8, 2024 · f236470 · f236470
1 parent 836bd41
commit f236470
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 0 deletions.
diff --git a/05-lection3/02-modal/README.md b/05-lection3/02-modal/README.md
@@ -0,0 +1,26 @@
+# Модалка
+
+figma: [https://www.figma.com/file/LavZmQfQccqyrTMzoSJYNu/CSS-Course?node-id=17326%3A0](https://www.figma.com/file/LavZmQfQccqyrTMzoSJYNu/CSS-Course?node-id=17326%3A0)
+
+Модалка или попап - блок, который открывается поверх содержимого страницы. Компонент встречается в любом проекте :)
+
+Хочу обратить внимание на затемнение страницы за модалкой - его делают с помощью растянутого на всю страницу полупрозрачного элемента.<br>
+Само модальное окно обычно располагают посередине страницы, нужно сделать так же)
+
+На странице нужно разместить модальное окно и кнопку, при нажатии на которую оно будет открываться. Компонент кнопки у вас уже есть :)<br>
+Модалки обычно открывают и закрывают с помощью JavaScript. Скрипт уже написан и подключен к решению.
+
+При нажатии на кнопку с `id="modal-open"` скрипт будет:
+- добавлять блоку модального окна с `id="modal"` свойство `display: block`
+- добавлять `body` свойство `overflow: hidden` чтобы запретить скролл страницы
+
+При нажатии на крестик с `id="modal-close"`:
+- добавлять блоку модального окна с `id="modal"` свойство `display: none`
+- добавлять `body` свойство `overflow: initial`, тем самым разрешая скролл на странице
+
+Резюмируя, чтобы скрипт заработал:
+- Кнопке присвоить `id="modal-open"`
+- Крестику в модалке присвоить `id="modal-close"`
+- Самому компоненту модального окна - `id="modal"`
+
+Не забудьте, что изначально модальное окно должно быть скрыто.
diff --git a/05-lection3/02-modal/index.html b/05-lection3/02-modal/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<!-- Страница с модалкой -->
+<html lang="ru">
+    <head>
+        <link rel="stylesheet" href="../../assets/css/main.css">
+        <link rel="stylesheet" href="./modal.css">
+        <title>Modal</title>
+    </head>
+    <body>
+    </body>
+    <script src="./index.js"></script> 
+</html>
diff --git a/05-lection3/02-modal/index.js b/05-lection3/02-modal/index.js
@@ -0,0 +1,19 @@
+(function() {
+    const close = document.getElementById('modal-close');
+    const modal = document.getElementById('modal');
+    const modalOpen = document.getElementById('modal-open');
+
+    if (!close || !modalOpen || !modal) {
+        return;
+    }
+
+    modalOpen.addEventListener('click', () => {
+        modal.style.display = 'block';
+        document.body.overflow = 'hidden';
+    });
+
+    close.addEventListener('click', () => {
+        modal.style.display = 'none';
+        document.body.overflow = 'initial';
+    });
+})();
diff --git a/05-lection3/02-modal/modal.css b/05-lection3/02-modal/modal.css
diff --git a/05-lection3/02-modal/test/solution.test.js b/05-lection3/02-modal/test/solution.test.js
@@ -0,0 +1,7 @@
+const expect = require('chai').expect;
+
+describe('lection3/modal', () => {
+  it('Модалка', () => {
+    expect(1).to.equal(1);
+  });
+});