Pop N Lock Dialog Mini Web Machine · July 31, 2024

July 31, 2024

devrel@google2 years ago

notecsshtmlshows

Ep #4
Pop n' Lock

<dialog> basics
top-layer, transition-behavior and overlay explained
how to transition a <dialog>

The latest Mini Web Machine on Chrome Developers · Tiny bits of code that power great UX.

Pop n' Lock Mini Web Machines

3 comments #

16likes

3reposts

Join the conversation on

`<dialog>` examples demo:

- default
- error
- wait
- notify
- confirm
- transitioned
- light dismiss
- fully customized

https://codepen.io/argyleink/pen/VwJvqrW

view transitions light-box dialog demo!

https://codepen.io/argyleink/pen/ZENRLva

<dialog> lightbox for any image

you have no idea how excited I was when I discovered these, absolute wins on so many levels