It pops, it locks, this is the dialog element. Discover a mini web machine that captures the users attention and focuses them into a blocking, overlaying action experience! A fast paced introductory video providing a high level overview of the dialog element and how to transition it with transition-behavior and @starting-style.
Chapters:
0:00 - Introduction
1:06 - Basic Dialog Machine
1:55 - Machine Super Powers
3:15 - No z-index Battles
4:17 - Transitioning / Animating
6:41 - Outro
Resources:
MDN dialog → https://goo.gle/4d06qIF
MDN transition-behavior → https://goo.gle/4fnfwkp
MDN @starting-style → https://goo.gle/3StqWcH
MDN overlay → https://goo.gle/3yKNRsT
MDN ::backdrop → https://goo.gle/3WLyGcB
Material dialog → https://goo.gle/3YIrhMD
CSS Podcast ep 80 → https://goo.gle/3SS4ydh
Demo Campout
basic dialog → https://goo.gle/3LLVnab
basic dialog + transitions → https://goo.gle/3yg9lOv
dialog using invokers → https://goo.gle/4deXrU0
fixed element vs the top-layer → https://goo.gle/3Wpv6TW
default, error, waiting, notify, confirm, transitions, light dismiss and custom → https://goo.gle/3A1Nrz5
dialog lightbox with view transitions - https://codepen.io/argyleink/pen/ZENRLva
Watch more Mini Web Machines→ https://goo.gle/MiniWebMachines
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#ChromeForDevelopers #Chrome
Speaker: Adam Argyle