From f236470781b7cc0dd853d9d4192338d46e12d84b Mon Sep 17 00:00:00 2001
From: javascriptru <67475495+jsru-1@users.noreply.github.com>
Date: Sun, 8 Dec 2024 11:31:48 +0300
Subject: [PATCH] =?UTF-8?q?Added=20task=20=D0=9C=D0=BE=D0=B4=D0=B0=D0=BB?=
=?UTF-8?q?=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
05-lection3/02-modal/README.md | 26 ++++++++++++++++++++++
05-lection3/02-modal/index.html | 12 ++++++++++
05-lection3/02-modal/index.js | 19 ++++++++++++++++
05-lection3/02-modal/modal.css | 0
05-lection3/02-modal/test/solution.test.js | 7 ++++++
5 files changed, 64 insertions(+)
create mode 100644 05-lection3/02-modal/README.md
create mode 100644 05-lection3/02-modal/index.html
create mode 100644 05-lection3/02-modal/index.js
create mode 100644 05-lection3/02-modal/modal.css
create mode 100644 05-lection3/02-modal/test/solution.test.js
diff --git a/05-lection3/02-modal/README.md b/05-lection3/02-modal/README.md
new file mode 100644
index 0000000..77f07e1
--- /dev/null
+++ 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)
+
+Модалка или попап - блок, который открывается поверх содержимого страницы. Компонент встречается в любом проекте :)
+
+Хочу обратить внимание на затемнение страницы за модалкой - его делают с помощью растянутого на всю страницу полупрозрачного элемента.
+Само модальное окно обычно располагают посередине страницы, нужно сделать так же)
+
+На странице нужно разместить модальное окно и кнопку, при нажатии на которую оно будет открываться. Компонент кнопки у вас уже есть :)
+Модалки обычно открывают и закрывают с помощью 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"`
+
+Не забудьте, что изначально модальное окно должно быть скрыто.
\ No newline at end of file
diff --git a/05-lection3/02-modal/index.html b/05-lection3/02-modal/index.html
new file mode 100644
index 0000000..f54da50
--- /dev/null
+++ b/05-lection3/02-modal/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ Modal
+
+
+
+
+
diff --git a/05-lection3/02-modal/index.js b/05-lection3/02-modal/index.js
new file mode 100644
index 0000000..c12976f
--- /dev/null
+++ 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';
+ });
+})();
\ No newline at end of file
diff --git a/05-lection3/02-modal/modal.css b/05-lection3/02-modal/modal.css
new file mode 100644
index 0000000..e69de29
diff --git a/05-lection3/02-modal/test/solution.test.js b/05-lection3/02-modal/test/solution.test.js
new file mode 100644
index 0000000..89c2978
--- /dev/null
+++ 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);
+ });
+});