Have a dialog

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 👋