RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconGit IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit Icon
Screenshot of one of the dialogs open
A series of images of an avatar doing a bunch of skateboard tricks.3 min read

Have a dialog

csshtml

3 free, semi-fancy, dialog examples for you and 1 dialog that can open and close without JS. They use CSS transitions for interruptible user experience and Open Props for the values.

Push it real good #

Scale back the page, dim the background to set the mood, and slide in the modal contents:

Flyout panel #

Classic fly out from the side, but is elegantly inset, and implements light-dismiss and an adaptive light/dark mouse visual over the ::backdrop:

Cart page pusher #

Another classic, this one pushes the whole page out of the way (which kind of makes sense for showing what inert is doing), and reveals a sidenav that wants to have a good total at the bottom.

Commando #

This one isn't fancy, it's just rad dialog stuff. There are basic commands moving into HTML called invoker commands. available in Canary

So eventually we'll be able to create a dialog with a close button like this:

<dialog id="dialog">
  <p>Hi, I'm a dialog.</p>
  <button commandfor="dialog" command="close">
    Ok
  </button>
</dialog>

An open button:

<button commandfor="dialog" command="show-modal">
  Open Dialog
</button> 

No js. Try it:

Here's a Dialog Codepen Collection and if you'd like a good explainer of all the CSS checkout the Pop n' Lock Machine 👋

Mentions #

Join the conversation on

225 likes
22 reposts
  • Neil
  • Jack Iakovenko
  • Brian Kardell
  • ???????????????????????? ????️‍????
  • Hugo Campos
  • Justin Frank
  • ???? Frontend Design & Development
  • GENKI
  • Thomas Broyer
  • Guillermo Cava
  • Jens Grochtdreis
  • Roni Laukkarinen
  • David Waumsley
  • Álvaro Montoro
  • Zed is not Dead ????️‍⚧️
  • Andy Bell
  • Steve Cain
  • Marcos de Miguel
  • Bramus
  • Mariana Beldi
  • Alan Dávalos
This is dope, I read a dialog article by you that inspired me to build this modal using the dialog element here: athena-kit-docs.vercel.app Thanks for all the tips!
scottykayescottykaye

@argyleink these are excellent

SnugugSnugug
Great (as usual!) I did something similar with popvers for tables, but didn't nail the animation for expandable rows (well, a simulation, since it's popovers!) — I'll rework it based on your "push it"! ;-) browser.style/ui/table-exp...

Crawl the CSS Webring