diff --git a/index.html b/index.html index 846cf93..9608c58 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,44 @@ - + - - - Практика позиционирования - - - - - - - \ No newline at end of file + + + Практика позиционирования + + + +
+ +
+
+ +
+ + + +
+

Модальное окно

+ +

Текст модального окна

+
+

Loading...

+
+

+ Loading... +

+
+
+
+ +
+ + + + diff --git a/index.js b/index.js index dd50919..55ea7d6 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,37 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +document.querySelector(".close-button").addEventListener("click", (event) => { + const element = document.querySelector(".lightbox"); + element.style.display = "none"; + + const element1 = document.querySelector(".overlay"); + element1.style.display = "none"; +}); + +document.querySelector(".open-button").addEventListener("click", (event) => { + const element = document.querySelector(".lightbox"); + element.style.display = "flex"; + + const element1 = document.querySelector(".overlay"); + element1.style.display = "block"; + + const redLine = document.querySelector(".red-line"); + const totalSteps = 128; + const totalDuration = 3000; + const maxWidth = 512; + let step = 0; + + redLine.style.width = "0px"; + + const timer = setInterval(() => { + step += 1; + redLine.style.width = (step * maxWidth) / totalSteps + "px"; + + if (step >= totalSteps) { + clearInterval(timer); + } + }, totalDuration / totalSteps); +}); diff --git a/styles.css b/styles.css index e69de29..9ff1eea 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,68 @@ +.block1 { + width: 100px; + height: 100px; + overflow: hidden; +} + +.img1 { + width: 100%; + height: 100%; + object-fit: contain; +} + +.lightbox { + width: 640px; + display: none; + flex-direction: column; + background-color: ghostwhite; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 24px; + z-index: 1000; +} + +.x-button { + width: 32px; + height: 32px; + background-color: transparent; + border: none; + font-size: 24px; + position: absolute; + top: 16px; + right: 16px; + cursor: pointer; +} + +.h2 { + padding: 0; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + z-index: 999; + display: none; +} + +.progress { + width: 512px; + position: relative; + background: gray; + overflow: hidden; +} + +.red-line { + position: absolute; + top: 0; + left: 0; + width: 50%; + height: 100%; + background: red; + z-index: 1001; +}