Skip to content

Commit f7452ff

Browse files
bennadelbennadel
committed
Exploring the dialog element.
1 parent ad762cc commit f7452ff

File tree

3 files changed

+195
-0
lines changed

3 files changed

+195
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Exploring The Dialog Element In HTML](https://bennadel.github.io/JavaScript-Demos/demos/dialog-element)
1314
* [Storing Metadata On Select Option Elements](https://bennadel.github.io/JavaScript-Demos/demos/select-option-dataset)
1415
* [Exploring Prev/Next Mechanics In HTMX](https://bennadel.github.io/JavaScript-Demos/demos/htmx-prev-next)
1516
* [Pixel Art With Alpine.js](https://bennadel.github.io/JavaScript-Demos/demos/pixel-art-alpine)

‎demos/dialog-element/index.htm‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>
6+
Exploring The Dialog Element In HTML
7+
</title>
8+
<link rel="stylesheet" type="text/css" href="./main.css" />
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Exploring The Dialog Element In HTML
14+
</h1>
15+
16+
<p>
17+
<button type="button" class="triggerModal">
18+
Toggle Modal
19+
</button>
20+
<button type="button" class="triggerNonModal">
21+
Toggle Non-Modal
22+
</button>
23+
</p>
24+
25+
<!--
26+
Adding large spacer to see how dialogs affect document flow; and how we can
27+
lock-down scrollbar while modal is open.
28+
-->
29+
<hr style="margin-bottom: 100rem;" >
30+
31+
<!-- [closedby=any] allows the click-outside (on backdrop) to close the modal. -->
32+
<dialog closedby="any">
33+
<!--
34+
[method=dialog] on the form will close the modal and set returnValue to the
35+
value of the submit button used to process the form. Note that form field
36+
values are left in place unless explicitly reset.
37+
-->
38+
<form method="dialog">
39+
<p>
40+
Are you sure?
41+
</p>
42+
<p>
43+
<button type="submit" value="Yes">
44+
Yes
45+
</button>
46+
<button type="submit" value="No">
47+
No
48+
</button>
49+
</p>
50+
</form>
51+
</dialog>
52+
53+
<style type="text/css">
54+
55+
/* When a modal window is open, remove scroll from body. */
56+
:is( html, body ):has( :modal ) {
57+
overflow: hidden ;
58+
}
59+
60+
/* Note: backdrop only shows for MODAL experiences (not non-modal). */
61+
dialog::backdrop {
62+
backdrop-filter: blur( 1px ) ; /* Not widely available yet. */
63+
background-color: #99999966;
64+
}
65+
66+
dialog {
67+
border: 2px solid #000000 ;
68+
border-radius: 4px ;
69+
scrollbar-gutter: stable ; /* Not widely available yet. */
70+
}
71+
72+
/* We can use [open] DOM state to animate-in the modal using CSS keyframes. */
73+
dialog[ open ] {
74+
animation-duration: 200ms ;
75+
animation-fill-mode: forwards ;
76+
animation-iteration-count: 1 ;
77+
animation-name: dialogEnter ;
78+
animation-timing-function: ease-out ;
79+
}
80+
@keyframes dialogEnter {
81+
from {
82+
opacity: 0.7 ;
83+
scale: 0.7 ;
84+
}
85+
to {
86+
opacity: 1.0 ;
87+
scale: 1.0 ;
88+
}
89+
}
90+
91+
</style>
92+
<script type="text/javascript">
93+
94+
var dialog = document.querySelector( "dialog" );
95+
var toggleModal = document.querySelector( ".triggerModal" );
96+
var toggleNonModal = document.querySelector( ".triggerNonModal" );
97+
98+
// Listen for the close event.
99+
dialog.onclose = ( event ) => {
100+
101+
console.log(
102+
`Closed with return value: %c${ dialog.returnValue }`,
103+
`font-weight: bold ; color: red ;`
104+
);
105+
106+
};
107+
108+
// Listen for the cancel event (closed via ESC key or background click).
109+
dialog.oncancel = ( event ) => {
110+
111+
console.log( "Modal canceled" );
112+
113+
};
114+
115+
// Wire up the MODAL toggle button.
116+
toggleModal.onclick = ( event ) => {
117+
118+
// Trying to open an already-open modal throws an error. As such, let's make
119+
// sure it's closed before we open the modal version. If it's already closed,
120+
// closing it again is a safe no-op.
121+
dialog.close();
122+
dialog.showModal();
123+
124+
};
125+
126+
// Wire up the NON-MODAL toggle button.
127+
toggleNonModal.onclick = ( event ) => {
128+
129+
if ( dialog.open ) {
130+
131+
dialog.close();
132+
133+
} else {
134+
135+
dialog.show();
136+
137+
}
138+
139+
};
140+
141+
</script>
142+
143+
</body>
144+
</html>

‎demos/dialog-element/main.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
2+
:where( html ) {
3+
box-sizing: border-box ;
4+
5+
& *,
6+
& *:before,
7+
& *:after {
8+
box-sizing: inherit ;
9+
}
10+
}
11+
12+
:where( * ) {
13+
&:focus,
14+
&:focus-within {
15+
outline-color: hotpink ;
16+
outline-offset: 4px ;
17+
outline-width: 2px ;
18+
}
19+
}
20+
21+
body {
22+
font-family: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif ;
23+
font-size: 18px ;
24+
line-height: 1.4 ;
25+
}
26+
27+
button,
28+
input:where([type="text"]),
29+
select,
30+
textarea {
31+
color: inherit ;
32+
font-family: inherit ;
33+
font-size: 20px ;
34+
line-height: inherit ;
35+
padding: 5px 10px ;
36+
}
37+
38+
button {
39+
padding: 5px 15px ;
40+
}
41+
42+
43+
form p:first-child {
44+
margin-top: 0 ;
45+
}
46+
form p:last-child {
47+
display: flex ;
48+
gap: 12px ;
49+
margin-bottom: 0 ;
50+
}

0 commit comments

Comments
 (0)