Click-outside-Modal/modal.css at main · Alwoch/Click-outside-Modal · GitHub

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
.cards {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 grid-gap: 20px;
 padding: 2rem;
 background-color: blueviolet;
}
.card {
 background: white;
 padding: 1rem;
 border-radius: 2px;
}
.card img {
 width: 100%;
}
.card h2 {
 color: black;
}

.modal-outer {
 display: grid;
 background: hsla(50, 100%, 50%, 0.7);
 position: fixed;
 height: 100vh;
 width: 100vw;
 top: 0;
 left: 0;
 justify-content: center;
 align-items: center;
 /* hide this modal until we need it */
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.2s;
}

.modal-inner {
 max-width: 600px;
 min-width: 400px;
 padding: 2rem;
 border-radius: 5px;
 min-height: 200px;
 transform: translateY(-200%);
 transition: transform 2s;background: white;

}

.modal-outer.open {
 opacity: 1;
 pointer-events: all;
}

.modal-outer img {
 width: 100%;
}

.modal-outer.open .modal-inner {
 transform: translateY(0);
}