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

July 31, 2024

devrel@google1 year 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

4 comments #

16likes

3reposts

Join the conversation on

???? Mini Web Machine Pop n' Lock - basics - explanations of top-layer, overlay and transition-behavior - how to transition a Watch on YouTube! www.youtube.com/watch?v=f3N-... ⤷ nerdy.dev/pop-n-lock-d...

`<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