-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
41 lines (39 loc) · 1.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal Window</title>
<link rel="stylesheet" href="modal.css" />
<script src="modal.js" defer></script>
</head>
<body>
<!-- Buttons to open modal -->
<div class="btns">
<button class="btn">Show Modal 1</button>
<button class="btn">Show Modal 2</button>
<button class="btn">Show Modal 3</button>
</div>
<!-- Modal Window -->
<div class="modal-window hidden">
<div class="modal">
<!-- button to close modal -->
<button class="close">❌</button>
<!-- content of modal -->
<p>
Lorem ipsum dolor sit amet. Aut suscipit quidem eum ducimus libero est
modi ullam non iusto molestiae et praesentium minima hic cumque modi est
quia quos. In odit laudantium hic voluptas iusto qui iusto autem et
placeat quisquam qui perspiciatis alias hic laudantium dolores. Sit
pariatur quasi aut ipsum debitis ut animi suscipit in possimus
laboriosam vel saepe nobis aut accusantium maxime et maxime facere. Est
vitae maiores qui deserunt nulla sit necessitatibus voluptas et pariatur
consequatur.
</p>
</div>
</div>
<!-- overlay in background to close button -->
<div class="overlay hidden"></div>
</body>
</html>