/
fullscreen-overlay-after.html
208 lines (188 loc) · 6.66 KB
/
fullscreen-overlay-after.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus Trap - Fullscreen Overlay example</title>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
const focusableElements = Array.from(document
.querySelectorAll('div[class~=popup-controls] > input, div[class=popup-button-container] > button'));
const first = focusableElements[0];
const last = focusableElements[focusableElements.length - 1];
document.addEventListener('keydown', (e) => {
const overlay = document.querySelector('dialog.popup-overlay.modal');
if (overlay && e.key === 'Tab') {
if (!focusableElements.includes(e.target)) {
trap(e, first);
} else if (e.target === last && !e.shiftKey) {
trap(e, first);
} else if (e.target === first && e.shiftKey) {
trap(e, last);
}
}
});
});
const trap = (e, element) => {
e.preventDefault();
element.focus();
}
const hideOverlay = (hide) => {
const overlay = document.querySelector('dialog[id=modal-window]');
if (hide === true) {
overlay.setAttribute('aria-hidden', 'true');
overlay.classList.remove('modal');
} else {
overlay.setAttribute('aria-hidden', 'false');
overlay.classList.add('modal');
}
}
</script>
<style>
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: visible;
background-color: rgba(255, 255, 255, 0.70);
display: none;
}
.modal {
display: flex;
align-items: center;
}
.popup {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
border-radius: 10px;
border: 1px solid black;
padding: 1em;
margin: auto;
gap: 1em;
max-width: 500px;
background-color: #fff;
}
.popup-controls {
display: grid;
grid-template-columns: 2em auto;
gap: 1em;
}
.popup-button-container {
display: flex;
flex-direction: row;
gap: 1em;
}
.form-grid {
display: grid;
grid-template-columns: auto auto;
max-width: 600px;
gap: 1em;
}
.form-submit {
margin: 1em;
}
button {
border-radius: 5px;
border: 1px solid black;
padding: 0.25em;
font-size: 1em;
background: white;
}
.accept {
background: #3584e4;
}
</style>
</head>
<body>
<dialog id="modal-window" class="popup-overlay modal" aria-modal="true">
<div class="popup">
<div>
<h2>Cookies 🍪</h2>
<p>
Very important information in regard to whom you will sell your soul to.
</p>
<p>
Allow or Prohibit:
</p>
<div class="popup-controls popup-controls-checkboxes">
<input id="technical" type="checkbox" checked>
<label for="technical">Technical Cookies</label>
<input id="analytical" type="checkbox" checked>
<label for="analytical">Analytical Cookies</label>
<input id="thirdParty" type="checkbox" checked>
<label for="thirdParty">3rd Party Cookies</label>
</div>
</div>
<div class="popup-button-container">
<button class="accept" onclick="hideOverlay(true)">
Accept
</button>
<button onclick="hideOverlay(true)">
Decline
</button>
</div>
</div>
</dialog>
<main>
<section>
<h1>Very cool website that needs cookies</h1>
<p>
Our quality content mainly consists of cats in various poses.
</p>
<a href="#">Here is a link that would get focused if the focus trap would not exist.</a>
<p>
Also dogs that sniff each other's butts are seen here.
</p>
<a href="#">Here is another link that would get focused if the focus trap would not exist.</a>
<p>
Have you ever watched a cockatoo solving a Rubik's cube? We neither.
</p>
<a href="#">Here is yet another link that would get focused if the focus trap would not exist.</a>
</section>
<section>
<h2>
Input form
</h2>
<p>
Very important controls, but you need to confirm your cookie choice first.
</p>
<form>
<div class="form-grid">
<label for="name">Name: </label>
<input id="name" type="text">
<label for="surname">Surname:</label>
<input id="surname" type="text">
<label for="newsletter">Newsletter:</label>
<select id="newsletter">
<option>No thanks</option>
<option>Yes</option>
</select>
<label for="email">E-Mail-Address:</label>
<input id="email" type="email">
<span>I am interested in:</span>
<div>
<input id="cats" type="checkbox">
<label for="cats">Cats</label>
<input id="dogs" type="checkbox">
<label for="dogs">Dogs</label>
<input id="cockatoos" type="checkbox">
<label for="cockatoos">Cockatoos</label>
</div>
</div>
<div class="form-submit">
<input type="submit" value="Submit">
</div>
</form>
</section>
<section>
<p>
Click here to re-run:
</p>
<a href="#" onclick="hideOverlay(false)">Show Cookie Banner</a>
</section>
</main>
</body>
</html>