-
Notifications
You must be signed in to change notification settings - Fork 21
/
dialog-native03.html
112 lines (100 loc) · 3.46 KB
/
dialog-native03.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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Native Dialog - Test 3: initial focus on dialog</title>
<link rel="stylesheet" href="https://russmaxdesign.github.io/accessible-forms/assets/css/examples.css">
<style>
dialog:focus {
outline: 0;
box-shadow: 0 0 0 1px #fff, 0 0 0 4px #000;
}
dialog h2 {
margin-top: 0;
}
dialog::-webkit-backdrop {
background: rgba(0, 0, 0, 0.75);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.75);
}
@media (min-width: 42em) {
dialog {
width: 50%;
}
}
/* Inert */
[inert] {
pointer-events: none;
cursor: default;
}
[inert], [inert] * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div class="wrapper">
<h1>Native Dialog - Test 3: initial focus on dialog</h1>
<p><a href="https://cdpn.io/pen/debug/ExQPJVj" target="_blank">Debug version</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptatibus, animi ratione et voluptate assumenda harum, ipsa dignissimos aliquam perspiciatis suscipit ipsam, similique labore voluptates itaque temporibus provident qui laboriosam.</p>
<button id="open-btn" class="button">Open Dialog</button>
<p><a href="https://cdpn.io/pen/debug/ExQPJVj" target="_blank">Debug version</a></p>
</div>
<dialog tabindex="-1">
<h2 id="dialog-heading">Wombats</h2>
<p id="dialog-description">Short-legged, Australian marsupials.</p>
<p>Wombats are <a href="https://en.wikipedia.org/wiki/Marsupial" target="_blank">marsupials</a> with brown, tan or grey fur and from head to tail. They are expert diggers with short, muscular legs and sharp claws.</p>
<button id="close-btn" class="button">Close</button>
</dialog>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script id="rendered-js">
let openBtn = document.getElementById('open-btn'),
closeBtn = document.getElementById('close-btn'),
wrapper = document.querySelectorAll('.wrapper')[0],
dialog = document.querySelector('dialog');
// event listeners for open/close buttons
openBtn.addEventListener('click', openDialog);
closeBtn.addEventListener('click', closeDialog);
// open dialog
function openDialog() {
dialog.showModal();
dialog.focus();
}
// close dialog
function closeDialog() {
dialog.close();
setTimeout(function () {
openBtn.focus();
});
}
// handle escape key close
document.addEventListener('keydown', e => {
if ((e.keyCode || e.which) === 27) {
closeDialog();
}
});
// listen for click outside dialog to close
dialog.addEventListener("click", e => {
var rect = e.target.getBoundingClientRect();
var minX = rect.left + e.target.clientLeft;
var minY = rect.top + e.target.clientTop;
if (e.clientX < minX || e.clientX >= minX + e.target.clientWidth ||
e.clientY < minY || e.clientY >= minY + e.target.clientHeight) {
closeDialog();
}
});
//# sourceURL=pen.js
</script>
</body>
</html>