Have a dialog

import "https://cdn.jsdelivr.net/npm/baseline-status"; 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. Checkout the Dialog Starter notebook! Push it real good # Scale back the page, dim the background to set the mood, and slide in the modal contents: See the Pen by Adam Argyle ( @argyleink ) on CodePen . 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 : See the Pen by Adam Argyle ( @argyleink ) on CodePen . 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. See the Pen by Adam Argyle ( @argyleink ) on CodePen . 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" closedBy = "any" > < 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: See the Pen by Adam Argyle ( @argyleink ) on CodePen . Here's a Dialog Codepen Collection and if you'd like a good explainer of all the CSS checkout the Pop n' Lock Machine 👋